找不到名称为“viewport”的内容。

Question

我正在使用 karma viewport npm包来通过 jasmine 测试规范来设置chrome浏览器的 viewport。我遵循了上面提供的链接中的指南。这很简单，但是不知道为什么我无法使它工作。

这是我的 karma.conf.js 文件。

module.exports = function (config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine', '@angular/cli', 'viewport'],
        plugins: [
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-remap-istanbul'),
            require('@angular/cli/plugins/karma'),
            require('karma-viewport')
        ],
        files: [
            { pattern: './src/test.ts', watched: false }
        ],
        preprocessors: {
            './src/test.ts': ['@angular/cli']
        },
        mime: {
            'text/x-typescript': ['ts','tsx']
        },
        remapIstanbulReporter: {
            reports: {
                html: 'coverage',
                lcovonly: './coverage/coverage.lcov'
            }
        },
        angularCli: {
            config: './angular-cli.json',
            environment: 'dev'
        },
        reporters: config.angularCli && config.angularCli.codeCoverage
            ? ['progress', 'karma-remap-istanbul']
            : ['progress'],

        htmlReporter: {
            outputFile: 'unit_test/report.html',

            //Optional
            pageTitle: 'Unit Tests',
            subPageTitle: 'This file includes all unit test cases segmented according to their suites.',
            groupSuites: true
        },

        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: false
    });
};

我正在尝试设置视口的测试规范

it('In mobile view, there should be three separate tabs to show daily, monthly and yearly savings', fakeAsync(() => {

        component.scrollToCalc();
        // approximate time required to load the calculator with animation
        tick(1000);
        fixture.detectChanges();
        viewport.set(200, 300);        // viewport variable throws error
        fixture.detectChanges();
    }));

编译器显示的错误信息为：

找不到名为“viewport”的变量。

我认为我不需要在TestBed配置中进行任何其他更改才能使其正常工作。不知何故，在我的spec文件中未公开viewport变量。

- Amit Chigadani

Answer 1

您的karma.conf看起来很不错 - 您已经在插件中列出了框架和要求。尝试在规范的开头声明viewport：

declare const viewport;
describe('My Test', () => {
...
});

我认为你遇到的问题是因为 karma-viewport 框架是用纯 JavaScript 编写的，而 TypeScript 编译器对它一无所知。

在你的规范文件顶部声明它，实际上是在告诉 TypeScript 编译器：“相信我，这个存在并且可用。”

- Christopher Badalucco

---

使用这种方法不起作用。viewport未定义。 - Ceri Westcott

有趣的是，人们会构建整个npm包，但在自述文件中却不包括最基本的设置... - Adam Hughes

import { Viewport } from 'karma-viewport/dist/adapter/viewport';声明常量 viewport: Viewport; - undefined

Answer 2

如此主题所解释的 https://github.com/squidfunk/karma-viewport/issues/35，文件文档是不完整的。

• 在 karma.conf.js 中，您需要将 'viewport' 添加到 frameworks，并在插件中添加 'require('karma-viewport')'。
• 在 tsconfig.spec.json 中，您需要将 'karma-viewport' 添加到 types。

// karma.conf.js

config.set({
    ...
    frameworks: [
        ... 
        'viewport'
    ],
    plugins: [
        ...
        require('karma-viewport')
    ],
   ...
});

// tsconfig.spec.js

{
    ...
    "compilerOptions": {
        ...
        "types": [
            ...
            "karma-viewport"
        ]
    }
    ...
}

- TCH