Testing chrome extension - require error

Question

I have this gulp task:

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

This is my 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>

And here is my test.js file:

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);
    });
})

But when I run gulp test I get this error message:

Error: Module name "sinon-chrome" has not been loaded yet for context: _. Use require([])

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

in defaultOnError at file:///c:/dev/extensions/NEW_EXPRESS/node_modules/requirejs/require.js:1 in onError at file:///c:/dev/extensions/NEW_EXPRESS/node_modules/requirejs/require.js:547 in localRequire at file:///c:/dev/extensions/NEW_EXPRESS/node_modules/requirejs/require.js:1433 in requirejs at file:///c:/dev/extensions/NEW_EXPRESS/node_modules/requirejs/require.js:1794

Answer 1

In the link in the error message, it implies you should use the async require method.

So if you update test.js to the following, then it should solve that issue:

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);
        });
    })
});

Answer 2

In an Angular 7 build you can do this.

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           
    });

and in your tests:

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}]

    });