Jest
パーフェクトなテストのソリューションはありません。とはいえ、jestは優れたTypeScriptサポートを提供する素晴らしいユニットテストのオプションです。
注意:単純なノードのpackage.json setupで始めることを前提としています。また、すべてのTypeScriptファイルはsrcフォルダに置かれていなければなりません。このフォルダは、きれいなプロジェクト設定のために(Jestを使わなくても)常に推奨されます。

ステップ1:インストール

npmを使用して次をインストールします。
1
npm i jest @types/jest ts-jest -D
Copied!
説明:
  • jestフレームワーク(jest)をインストールします
  • jestの型(@types/jest)をインストールします
  • Jest用のTypeScriptプリプロセッサ(ts-jest)をインストールします。これにより、Jestはその場でTypeScriptをトランスパイルすることができ、source-mapをサポートします
  • これらのすべてを、あなたのdevの依存関係に保存してください(テストはほとんど常にnpmのdev-dependencyです)

ステップ2:Jestを設定する

次のjest.config.jsファイルをプロジェクトのルートに追加します:
1
module.exports = {
2
"roots": [
3
"<rootDir>/src"
4
],
5
"testMatch": [
6
"**/__tests__/**/*.+(ts|tsx|js)",
7
"**/?(*.)+(spec|test).+(ts|tsx|js)"
8
],
9
"transform": {
10
"^.+\\.(ts|tsx)quot;: "ts-jest"
11
},
12
}
Copied!
説明:
  • 私達はすべてのTypeScriptファイルをプロジェクトのsrcフォルダに入れることを常にお勧めします。また、これに倣いroots設定ではsrcフォルダを指定します。
  • testMatch設定は、ts/tsx/jsフォーマットで書かれた.test/.specファイルを発見するためのglobのパターンマッチャーです。
  • transform設定は、ts/tsxファイルに対してts-jestを使うようjestに指示します。

手順3:テストを実行する

あなたのプロジェクトのルートからnpx jestを実行すると、jestはあなたのテストを実行します。

オプション:npmスクリプトのスクリプトターゲットを追加する

package.jsonに追加してください:
1
{
2
"test": "jest"
3
}
Copied!
  • これにより、簡単なnpm tでテストを実行できます。
  • また、npm t --watchのwatchモードでも。

オプション:watchモードでjestを実行する

  • npx jest --watch

  • foo.tsファイルの場合:
1
export const sum
2
= (...a: number[]) =>
3
a.reduce((acc, val) => acc + val, 0);
Copied!
  • 単純なfoo.test.ts
1
import { sum } from '../foo';
2
3
test('basic', () => {
4
expect(sum()).toBe(0);
5
});
6
7
test('basic again', () => {
8
expect(sum(1, 2)).toBe(3);
9
});
Copied!
ノート:
  • Jestは、グローバルなtest関数を提供します。
  • Jestには、グローバルなexpectの形でアサーションがあらかじめ組み込まれています。

Example async

Jestには、async/awaitサポートが組み込まれています。例えば:
1
test('basic', async () => {
2
expect(sum()).toBe(0);
3
});
4
5
test('basic again', async () => {
6
expect(sum(1, 2)).toBe(3);
7
}, 1000 /* optional timeout */);
Copied!

enzymeの例

enzymeのDOMサポートは、Reactコンポーネントをテストすることができます。enzymeを設定するには3つのステップがあります:
  1. 1.
    enzyme、enzymeの型、より良いenzymeのスナップショットシリアライザ、あなたのreactバージョンのためのenzyme-adapter-reactをインストールします。npm i enzyme @types/enzyme enzyme-to-json enzyme-adapter-react-16 -D
  2. 2.
    "snapshotSerializers""setupTestFrameworkScriptFile"jest.config.jsに追加します:
1
module.exports = {
2
// OTHER PORTIONS AS MENTIONED BEFORE
3
4
// Setup Enzyme
5
"snapshotSerializers": ["enzyme-to-json/serializer"],
6
"setupFilesAfterEnv": ["<rootDir>/src/setupEnzyme.ts"],
7
}
Copied!
  1. 1.
    src/setupEnzyme.tsファイルを作成します。
1
import { configure } from 'enzyme';
2
import EnzymeAdapter from 'enzyme-adapter-react-16';
3
configure({ adapter: new EnzymeAdapter() });
Copied!
次に、reactコンポーネントとテストの例を示します:
  • checkboxWithLabel.tsx
1
import * as React from 'react';
2
3
export class CheckboxWithLabel extends React.Component<{
4
labelOn: string,
5
labelOff: string
6
}, {
7
isChecked: boolean
8
}> {
9
constructor(props) {
10
super(props);
11
this.state = { isChecked: false };
12
}
13
14
onChange = () => {
15
this.setState({ isChecked: !this.state.isChecked });
16
}
17
18
render() {
19
return (
20
<label>
21
<input
22
type="checkbox"
23
checked={this.state.isChecked}
24
onChange={this.onChange}
25
/>
26
{this.state.isChecked ? this.props.labelOn : this.props.labelOff}
27
</label>
28
);
29
}
30
}
Copied!
  • checkboxWithLabel.test.tsx
1
import * as React from 'react';
2
import { shallow } from 'enzyme';
3
import { CheckboxWithLabel } from './checkboxWithLabel';
4
5
test('CheckboxWithLabel changes the text after click', () => {
6
const checkbox = shallow(<CheckboxWithLabel labelOn="On" labelOff="Off" />);
7
8
// Interaction demo
9
expect(checkbox.text()).toEqual('Off');
10
checkbox.find('input').simulate('change');
11
expect(checkbox.text()).toEqual('On');
12
13
// Snapshot demo
14
expect(checkbox).toMatchSnapshot();
15
});
Copied!

私たちがjestを好きな理由

  • ビルトインのアサーションライブラリ
  • 優れたTypeScriptサポート
  • 非常に信頼できるテストwatcher
  • スナップショットテスト
  • ビルトインのカバレッジレポート
  • ビルトインのasync/awaitサポート
最終更新 10mo ago