Jest を触ってみる

Jest Node.js JavaScript

経緯

個人的にはどうしても後回しにされがちなテストコードについて、少しでも精神的な障壁を下げるべく Jest を軽く触ってみることにしました。

PHPUnit についてはPHPUnitとXdebugでコードカバレッジの出力を試すで触ったことがあるので、ユニットテストの雰囲気は掴んでいます。

そこで今回は JS 側を……ということで Jest を触ってみることにします。

今回は本当に最初の最初だけ。基本的にはJestで始める！ユニットテスト - 環境の準備とテストの実行 | CodeGridの記事の通りに進めます。

```json:package.json
{
"name": "finality_jest",
"version": "0.0.1",
"description": "jestのテスト",
"main": "sum.js",
"scripts": {
"test": "jest",
"test:coverage": "jest --coverage"
},
"author": "",
"license": "ISC",
"devDependencies": {
"jest": "^26.6.3"
}
}


`npm init` した後 `yarn add --dev jest` で Jest を追加。 npm scripts にテスト実行とカバレッジ出力のスクリプトを追記。

### sum.js

```javascript:sum.js
const sum = (a, b) => {
    return a + b;
};

module.exports = sum;

ほぼ記事のママです。

jest.config.js

```javascript:jest.config.js
module.exports = {
coverageDirectory: 'coverage'
};


現状では有効なオプションを指定していませんが、 `coverages` に変更してカバレッジ出力されるディレクトリが変化したことは確認できたので、後はテストケースに併せてこの辺(英: [Configuring Jest · Jest](https://jestjs.io/docs/en/configuration), 日: [Configuring Jest · Jest](https://jestjs.io/docs/ja/configuration))のオプションをカスタマイズしていけば良いのかな、と思います。

### __test__/sum.test.js

```javascript:sum.test.js
const sum = require('../sum');

test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
});

こちらもほぼママ。実際に使用する場合はテストコードが増えていくと思われるので予めディレクトリに入れておく方向性で考えました。

その場合、ファイル名末尾を .test.js にする必要はないのですが、実際のコードと同じ名前にすると、今回は sum.js と __test__/sum.js の区別がエディタ上で付きづらいので、結局 sum.test.js と末尾に .test.js を付ける方向の方が良いのかな、と感じました。

ディレクトリ構造

以上を踏まえてディレクトリ構造は以下のようになりました。

  /
  ├ __test__/
  │    └ sum.test.js
  ├ .gitignore
  ├ jest.config.js
  ├ package.json
  └ sum.js

実行結果

これでテストを実行。

> yarn test:coverage
$ jest --coverage
 PASS  __tests__/sum.test.js
  √ adds 1 + 2 to equal 3 (3 ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 | 
 sum.js   |     100 |      100 |     100 |     100 | 
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.061 s
Ran all test suites.
Done in 6.86s.

OKですね。

試しに sum.js を以下のように変更します。

```javascript:sum.js
const sum = (a, b) => {
return a - b;
};

module.exports = sum;


加算ではなく減算にしました。これで再度テスト実行。

```bash
> yarn test:coverage
yarn run v1.22.4
$ jest --coverage
 FAIL  __tests__/sum.test.js
  × adds 1 + 2 to equal 3 (6 ms)

  ● adds 1 + 2 to equal 3

    expect(received).toBe(expected) // Object.is equality

    Expected: 3
    Received: -1

      2 | 
      3 | test('adds 1 + 2 to equal 3', () => {
    > 4 |     expect(sum(1, 2)).toBe(3);
        |                       ^
      5 | });
      6 | 

      at Object.<anonymous> (__tests__/sum.test.js:4:23)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 | 
 sum.js   |     100 |      100 |     100 |     100 | 
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        4.363 s
Ran all test suites.
error Command failed with exit code 1.

怒られますね。OKです。

元に戻して再度実行。

今度は生成された coverage ディレクトリを辿ります。 coverage/lcov-report/ を開くと以下のようにカバレッジが出力されていました。