typescriptのunit test(webpack2, karma, jasmine, chai)

directory structure

├── src
│   └── add.ts
├── test
│   └── unit
│       ├── add.spec.ts
│       └── index.spec.ts
├── test.webpack.conf.js
├── tsconfig.json
└── tslint.json

npm packages

package.json

{
  "name": "unit test",
  "version": "1.0.0",
  "description": "Unit Test",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config test.webpack.conf.js",
    "test": "karma start karma.conf.js"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "@types/chai": "^3.4.34",
    "@types/jasmine": "^2.5.41",
    "@types/node": "^7.0.0",
    "awesome-typescript-loader": "^3.0.0-beta.18",
    "chai": "^3.5.0",
    "jasmine-core": "^2.5.2",
    "karma": "^1.4.0",
    "karma-jasmine": "^1.1.0",
    "karma-mocha-reporter": "^2.2.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-typescript": "^2.1.6",
    "karma-webpack": "^2.0.1",
    "tslint": "^4.3.1",
    "tslint-eslint-rules": "^3.2.3",
    "typescript": "^2.1.5",
    "webpack": "^2.2.0"
  }
}

tsconfig

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "declaration": true,
    "stripInternal": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "es2015",
    "noEmitOnError": false,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "rootDir": ".",
    "sourceMap": true,
    "inlineSources": true,
    "lib": ["es2015", "dom"],
    "target": "es5",
    "skipLibCheck": true
  }
}

webpack config

test.webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './test/unit/index.spec.ts',
  module: {
    rules: [{
      test: /\.ts$/,
      include: [
        path.resolve(__dirname, 'src'),
        path.resolve(__dirname, 'test')
      ],
      exclude: [
        /node_modules/
      ],
      loader: 'awesome-typescript-loader',
    }]
  },
  resolve: {
    modules: [
      'node_modules',
    ],
    extensions: ['.ts', '.js'],
  },
  devtool: 'inline-source-map',
  stats: "verbose",
  plugins: [
    new webpack.SourceMapDevToolPlugin({
      filename: null, // if no value is provided the sourcemap is inlined
      test: /\.(ts|js)($|\?)/i // process .js and .ts files only
    })
  ],
}

pluginがテストで絶大な威力を発揮する。
https://github.com/webpack/karma-webpack/issues/109

karma config

karma.conf.js

// Karma configuration
// Generated on Sat Jan 21 2017 10:54:02 GMT+0900 (JST)
const webpackConfig = require('./test.webpack.conf');

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '.',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine', 'karma-typescript'],

    // list of files / patterns to load in the browser
    files: [
      'src/**/*.ts',
      'test/unit/index.spec.ts',
    ],

    // list of files to exclude
    exclude: [],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'test/unit/index.spec.ts': ['webpack', 'sourcemap'],
      'src/**/*.ts': ['webpack', 'karma-typescript'],
    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['mocha', 'karma-typescript'],

    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity,

    // phantomjs configuration
    phantomjsLauncher: {
      // Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing phantom) 
      exitOnResourceError: true
    },

    // webpack configuration
    webpack: webpackConfig,

    // webpack-dev-middleware configuration
    webpackMiddleware: {
      stats: 'errors-only'
    },

    coverageReporter: {
      reporters: [
        { type: 'text-summary' },
      ]
    },
  })
}

source code

add.ts

export function add(a: number, b: number): number {
  return a + b;
}

test code

add.spec.ts

import { add } from '../../src/add';
import * as chai from 'chai';

describe('test: add', () => {
  const expect = chai.expect;

  it('add two to one', () => {
    expect(add(1, 2)).equal(3);
  });

  it("add three to one, failed" ,()=> {
    expect(add(1, 3)).equal(3);
  });
});

index.spec.ts

import './add.spec';

run

$ npm test

SUMMARY:
✔ 1 test completed
✖ 1 test failed

FAILED TESTS:
  test: add
    ✖ add three to one
      PhantomJS 2.1.1 (Mac OS X 0.0.0)
    AssertionError: expected 4 to equal 3 in test/unit/index.spec.ts (line 3157)
    AssertionError@webpack:///~/assertion-error/index.js:74:0 <- test/unit/index.spec.ts:594:24
    assert@webpack:///~/chai/lib/chai/assertion.js:107:0 <- test/unit/index.spec.ts:3153:31
    assertEqual@webpack:///~/chai/lib/chai/core/assertions.js:487:0 <- test/unit/index.spec.ts:3670:18
    webpack:///~/chai/lib/chai/utils/addMethod.js:41:0 <- test/unit/index.spec.ts:7106:30
    webpack:///test/unit/add.spec.ts:12:28 <- test/unit/index.spec.ts:1003:105
    loaded@http://localhost:9876/context.js:151:17



=============================== Coverage summary ===============================
Statements   : 50% ( 2/4 )
Branches     : 100% ( 0/0 )
Functions    : 0% ( 0/2 )
Lines        : 50% ( 2/4 )
================================================================================

元のテストファイルで失敗している行が出ていることを確認。
webpack:///test/unit/add.spec.ts:12:28

余談

1から用意するのが面倒でした。。
golangとかgo testでテスト出来るからすげえという気持ち