ブラウザ固有の機能を使うTypeScript/JavaScriptをテストしたいとき
やりたいこと
やりかた
この変更が参考になる。
実際の流れを書くと。
code:bash
npm i -D @types/jasmine jasmine-core karma karma-chrome-launcher karma-cli karma-jasmine karma-typescript karma-firefox-launcher
package.jsonの"test"を以下に書き換える。
code:package.json
...
"test": "karma start",
...
以下の内容のkarma.conf.jsを生成する。
code:karma.conf.js
module.exports = function(config) {
config.set({
files: [
{ pattern: "src/**/*.ts" },
{ pattern: "test/**/*.ts" },
],
preprocessors: {
},
singleRun: true
});
};
以下のようにlib:に"dom"を加える。
code:tsconfig.json
{
"compilerOptions": {
...
},
...
}
動作確認
動作確認のために以下の内容をtest/index.tsに貼り付けて、npm testを実行する。
code:test/index.ts
describe('console.log', () => {
it('should show window object', () => {
console.log(typeof window);
// => 'object'
});
});
windowはNode.jsなら存在しないのでそれを使って確認している。 同じ手法でテストしているプロジェクト一覧
nwtgck.iconの以下のプロジェクトではブラウザ上でのテスト+CIをしているので参考になるかもしれない。