Jestを試してみる #JavaScript

JavaScriptでTDDするためのフレームワーク探してて、Jestがよいという記事があったので試してみた。

ネタ元： https://postd.cc/a-complete-guide-to-testing-javascript-in-2017/

環境

Mac Mojave
パッケージ管理：yarn 1.10.1

yarnは以下手順で導入

$ npm install -g yarn

Jestを試す

package.json作成

yarn initの質問はすべてデフォルトで。
package.json作成したあと、licenseとかのいらない箇所は消した

$ mkdir jestSample
$ cd jestSample
$ yarn init
yarn init v1.10.1
question name (JestSample):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private:
success Saved package.json
✨  Done in 24.45s.

あとはJestの公式ページの通りにやってみる
ただし、プロダクトコードとテストコードはディレクトリを分けて作成した

jestの導入

$ yarn add --dev jest
yarn add v1.10.1
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 353 new dependencies.
info Direct dependencies
└─ jest@23.6.0
info All dependencies
(省略)
✨  Done in 8.57s.

テストする

テスト対象のjsを作成

src/sum.js

function sum(a, b){
  return a + b;
}

テストコードを作成
テスト名は日本語にしてみた

test/sum.test.js

const sum = require('../src/sum');

test('1 + 2  が 3 になること', () => {
  expect(sum(1, 2)).toBe(3);
});

package.jsonにtestの定義を追加
scriptsの上のカッコ後ろにカンマをつけるのを忘れないように

package.json

{
  "name": "JestSample",
  "version": "1.0.0",
  "devDependencies": {
    "jest": "^23.6.0"
  },
  "scripts": {
    "test": "jest"
  }
}

テスト実行
yarnは実行ディレクトリ配下のテストコードを検索して実行するので、テストコードのディレクトリ定義とかは不要

$ yarn test
yarn run v1.10.1
warning package.json: No license field
$ jest
 PASS  test/sum.test.js
  ✓ 1 + 2  が 3 になること (3ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.739s, estimated 1s
Ran all test suites.
✨  Done in 1.32s.

テスト失敗したときの出力も確認
sum.jsのreturnを変えて試してみた

$ yarn test
yarn run v1.10.1
warning package.json: No license field
$ jest
 FAIL  test/sum.test.js
  ✕ adds 1 + 2  qeuals 3 (11ms)

  ● adds 1 + 2  qeuals 3

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

    Expected: 3
    Received: 4

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

      at Object.toBe (test/sum.test.js:4:21)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        0.919s, estimated 1s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

参考

Jestで使用できるMatcher

https://jestjs.io/docs/ja/using-matchers
https://jestjs.io/docs/ja/expect