Saturday 29 April 2017

Setup Testing with Karma Mocha Webpack2 Typescript

I'm trying to setup testing in my custom Webpack 2 boilerplate with Karma, Mocha and Chai. In the project I'm using Typescript 2, so package.json has following structure:

"scripts": {
    ...
    "test": "NODE_ENV='test' karma start karma.conf.js"
    ...
 },
"devDependencies":{
    ...
    "chai": "^3.5.0",
    "karma": "^1.6.0",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-firefox-launcher": "^1.0.1",
    "karma-mocha": "^1.3.0",
    "karma-sinon": "^1.0.5",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-typescript-preprocessor2": "^1.2.1",
    "karma-webpack": "^2.0.3",
    "mocha": "^3.3.0",
    "typescript": "^2.2.1",
    "awesome-typescript-loader": "^3.0.8",
    ...
}

karma.conf.js:

var webpackConfig = require('./webpack.test.config')();
module.exports = function(config) {
  config.set({

    basePath: '',

    frameworks: ['mocha', 'chai'],

    files: [
      'src/app/*.test.ts'
    ],

    exclude: [
    ],

    preprocessors: {
      'src/app/*.ts': ['webpack']
    },

    webpack: {
      module: webpackConfig.module,
      resolve: webpackConfig.resolve
    },

    reporters: ['progress'],

    port: 9876,

    colors: true,

    logLevel: config.LOG_INFO,

    autoWatch: true,

    browsers: ['Firefox'],

    singleRun: false,

    concurrency: Infinity
  })
};

webpack.test.config.js:

const path = require( "path" );

module.exports = function () {
  return {

    resolve: {
      extensions: [ '.ts', '.js' ]
    },

    module: {
      rules: [
        {
          test: /\.ts$/,
          loaders: [ 'awesome-typescript-loader' ],
          include: path.resolve( __dirname, "src/app" )
        },
        {
          test: /\.ts$/,
          enforce: 'pre',
          loader: 'tslint-loader',
          options: {
            configFile: 'tslint.json',
            tsConfigFile: 'tsconfig.json'
          }
        }
      ]
    }
  };

};

And finally simple test file index.test.ts:

import { expect } from "chai";

describe("Something abstract", () => {
  describe("Something specific", () => {
    it("Something", () => {
      expect(1).equal(1);
    });
  });
});

With this setup when running npm run test I've git this log in console:

someuser@someuser:/var/www/html/js-boilerplate$ npm run test
> js-boilerplate@1.0.0 test /var/www/html/js-boilerplate

Hash: e0bdc8cc97632b01d813
Version: webpack 2.2.1
Time: 52ms
webpack: Compiled successfully.
webpack: Compiling...
[at-loader] Using typescript@2.2.1 from typescript and "tsconfig.json" from /var/www/html/js-boilerplate/tsconfig.json.
[at-loader] Checking started in a separate process...
[at-loader] Ok, 0.544 sec.
29 04 2017 14:44:37.327:WARN [karma]: No captured browser, open http://localhost:9876/
Hash: a80b543420ca5defa3ec
Version: webpack 2.2.1
Time: 2321ms
                Asset    Size  Chunks             Chunk Names
src/app/index.test.ts  216 kB       0  [emitted]  src/app/index.test.ts
chunk    {0} src/app/index.test.ts (src/app/index.test.ts) 210 kB [entry] [rendered]
    [1] ./~/chai/lib/chai/config.js 1.46 kB {0} [built]
    [2] ./~/chai/lib/chai/utils/inspect.js 9.86 kB {0} [built]
    [3] ./~/type-detect/index.js 40 bytes {0} [built]
    [4] ./~/assertion-error/index.js 2.44 kB {0} [built]
   [11] ./~/chai/index.js 40 bytes {0} [built]
   [14] ./~/chai/lib/chai.js 1.28 kB {0} [built]
   [15] ./~/chai/lib/chai/assertion.js 3.79 kB {0} [built]
   [16] ./~/chai/lib/chai/core/assertions.js 51.8 kB {0} [built]
   [17] ./~/chai/lib/chai/interface/assert.js 40.9 kB {0} [built]
   [18] ./~/chai/lib/chai/interface/expect.js 770 bytes {0} [built]
   [19] ./~/chai/lib/chai/interface/should.js 5.67 kB {0} [built]
   [28] ./~/chai/lib/chai/utils/index.js 1.71 kB {0} [built]
   [32] ./~/chai/lib/chai/utils/test.js 534 bytes {0} [built]
   [33] ./~/deep-eql/index.js 39 bytes {0} [built]
   [41] ./src/app/index.test.ts 312 bytes {0} [built]
     + 27 hidden modules
webpack: Compiled successfully.
29 04 2017 14:44:37.339:INFO [karma]: Karma v1.6.0 server started at http://0.0.0.0:9876/
29 04 2017 14:44:37.340:INFO [launcher]: Launching browser Firefox with unlimited concurrency
29 04 2017 14:44:37.368:INFO [launcher]: Starting browser Firefox
29 04 2017 14:44:39.798:INFO [Firefox 53.0.0 (Ubuntu 0.0.0)]: Connected on socket 7v5xn2yZVXCAVAGiAAAA with id 11275629
Firefox 53.0.0 (Ubuntu 0.0.0): Executed 0 of 0 ERROR (0.002 secs / 0 secs)

I don't see any usefull information how to google this issue, but I suspect that this is because I didn't specify in karma.conf.js files something like bundle.js, but originaly in my webpack.common.config.js I have multiple entries and I have no idea how to resolve this issue.



via lomboboo

No comments:

Post a Comment