2
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Jestを試してみる

Last updated at Posted at 2018-09-30

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

2
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?