测试 chrome 扩展 - 需要错误答案

【问题标题】：Testing chrome extension - require error测试 chrome 扩展 - 需要错误
【发布时间】：2017-04-09 06:43:03
【问题描述】：

我有这个gulp 任务：

gulp.task('test', function () {
    return gulp.src('test/runner.html')
        .pipe(mochaPhantomJS());
});

这是我的runner.html：

<!DOCTYPE html>
<html>
    <head>
        <title>Mocha</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
    </head>
    <body>
        <script src="../node_modules/mocha/mocha.js"></script>
        <script>mocha.setup('bdd')</script>
        <script src="../node_modules/chai/chai.js"></script>
        <script src="../node_modules/requirejs/require.js"></script>

        <script>
          var assert = chai.assert;
          var expect = chai.expect;
          var should = chai.should();
        </script>
        <script src="spec/test.js"></script>
        <script>
            if (window.mochaPhantomJS) {
              console.log('Running mochaPhantomJS...');
              mochaPhantomJS.run();
            } else {
              console.log('Running mocha...');
              mocha.run();
            }
        </script>
    </body>
</html>

这是我的test.js 文件：

var chrome = require('sinon-chrome');
var popup = require('../../source/scripts/popup');

describe('sumit', function(){
    before(function () {
        global.chrome = chrome;
    });
    it('Should return 1', function(){
        assert(popup.sum(0,1) === 1);
    });
})

但是当我运行gulp test 时，我收到以下错误消息：

错误：尚未为上下文加载模块名称“sinon-chrome”：_。使用 require([])

http://requirejs.org/docs/errors.html#notloaded

在 defaultOnError 处 file:///c:/dev/extensions/NEW_EXPRESS/node_modules/requirejs/require.js:1 在 onError 处 file:///c:/dev/extensions/NEW_EXPRESS/node_modules/requirejs/require.js:547 在本地要求在 file:///c:/dev/extensions/NEW_EXPRESS/node_modules/requirejs/require.js:1433 在requirejs中 file:///c:/dev/extensions/NEW_EXPRESS/node_modules/requirejs/require.js:1794

【问题讨论】：

请edit 成为主题问题：包括一个完整 minimal reproducible example 重复该问题。包括一个manifest.json，一些后台和内容脚本。寻求调试帮助的问题（“为什么这段代码不工作？”）必须包括：►期望的行为，►特定问题或错误和►必要的最短代码重现它在问题本身。没有明确问题陈述的问题对其他读者没有用处。请参阅：“如何创建 minimal reproducible example”、What topics can I ask about here? 和 How to Ask。
错误中的链接暗示您应该使用 async require 方法。即require(['sinon-chrome'], function (chrome) { // everything else in test.js }); 即使实施了该更改，您是否仍然遇到相同的错误？

标签： google-chrome-extension gulp requirejs mocha.js mocha-phantomjs

【解决方案1】：

在link in the error message 中，暗示您应该使用异步require 方法。

因此，如果您将test.js 更新为以下内容，那么它应该可以解决该问题：

require(['sinon-chrome'], function (chrome) { 
    var popup = require('../../source/scripts/popup');

    describe('sumit', function(){
        before(function () {
            global.chrome = chrome;
        });
        it('Should return 1', function(){
            assert(popup.sum(0,1) === 1);
        });
    })
});

【讨论】：

或者您可以将popup = require('../../source/scripts/popup'); 放在before() 回调中describe() 中。

【解决方案2】：

在 Angular 7 构建中，您可以做到这一点。

Karma.config：

config.set({
        basePath: '',
        frameworks: ['jasmine', '@angular-devkit/build-angular'],
        plugins: [
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-jasmine-html-reporter'),
            require('karma-coverage-istanbul-reporter'),
            require('@angular-devkit/build-angular/plugins/karma')
        ],
        client: {
            clearContext: false // leave Jasmine Spec Runner output visible in browser
        },
        coverageIstanbulReporter: {
            dir: require('path').join(__dirname, '../coverage'),
            reports: ['html', 'lcovonly'],
            fixWebpackSourcePaths: true
        },
        reporters: ['kjhtml', 'progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        singleRun: false           
    });

在你的测试中：

import * as chrome from 'sinon-chrome';
import {MyService} from '../my.service';

describe('RunTaskService', () => {
    beforeEach(() => {
      TestBed.configureTestingModule({});
      (global as any).chrome = chrome;
    });
    it('should be start a task', done => {
        const service: MyService = TestBed.get(MyService);
        expect(service).toBeTruthy();

        chrome.runtime.lastError = null;
        chrome.tabs.query.yields([{url: 'https://cnn.com', id: 123}]);

        // call your code to test. the chrome.tabs.query will
        // return [{url: 'https://cnn.com', id: 123}]

    });

【讨论】：