React 入門 (4) ～ Jest 入門 ～

今回は Jest に入門する。React とは関係ないが、プログラミングをしていくうえでテストフレームワークの環境を作っておくことは最近では必須となってきているので入れておく。

Facebook 製 JavaScript テストツール Jest を使ってテストする ( Babel, TypeScript のサンプル付き ) – PSYENCE:MEDIA

これを参考にする。

今回は一から以前作成した環境に上書きする形ではなく、一から作成してみる。というのも、一度以前の環境の上に作ってみたのだが、ちゃんと動かなかった。そこで一旦まっさらな環境で動作させてみて、動くことを確認してからマイグレーションしていったほうがいいと考えたのだ。

基本的に npm で実行する。

$ git init
$ npm init
$ npm install --save-dev jest
$ mkdir src

src/hello.js を作成

function hello(name) {
  return 'Hello ' + name + '!!';
}
module.exports = hello;

テスト用ファイル src/hello.test.js を作成

var hello = require('./hello');
test('hello("jest") to be "Hello Jest!!"', function() {
  expect(hello('Jest')).toBe('Hello Jest!!');
});

test('hello("jest") not to be "Hello fukumasuya!!"', function() {
  expect(hello('Jest')).not.toBe('Hello fukumasuya!!');
});

package.json を書き直す

{
  ...
  "scripts": {
    "test": "jest"
  }
}

テストを実行する

$ npm run test

これで一応は実行できた。

---

次に typescript を使て jest でテストを実行する。環境は上で作成したものをベースにする。

Jest · TypeScript Deep Dive

上記を参考にする。

$ npm i jest @types/jest ts-jest --save-dev
$ npm i typescript --save-dev

jest.config.js を作成する。

module.exports = {
  "roots": [
    "./src"
  ],
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  },
  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
  ],
}

src/foo.ts を作成

export const sum
  = (...a: number[]) =>
    a.reduce((acc, val) => acc + val, 0);

src/foo.test.ts を作成

import { sum } from './foo';

test('basic', () => {
  expect(sum()).toBe(0);
});

test('basic again', () => {
  expect(sum(1, 2)).toBe(3);
});

テストを実行する

$ npm run test

完了

---

さて、本題。以前作成した環境に Jest を入れる

上記で作成した jest.config.js ./src/foo.ts ./src/foo.test.ts をコピーする。

package.json に 以下の項目を追加。もしかしたらいらないかも。

{
  ...
  "test": "jest"
}

テストの実行は npm run test ではだめだった(なぜだろう???) なので、以下で実行する

$ npx jest

成果物は以下。

GitHub - bamchoh/react-study at 2019-01-25

完了