Help us understand the problem. What is going on with this article?

5分で始めるJestで快適テスト生活

Jestとは

JavaScriptのためのテスティングフレームワークです。
一般的にプログラミング言語のテストというと

  • テストランナー
  • アサーションライブラリ
  • テストモック・テストダブル用ライブラリ

などいくつかのライブラリ群が必要になりますが、これらを全て自分で集めるのはなかなかに大変な作業です。

そこでJestでは最初からテストに必要なものを一式揃えることでテストのためのフレームワークを提供する仕組みになっています。

導入

さっそく導入します。

yarn add --dev jest

今後何度も実行することになるのでpackage.jsonにショートハンドを追加しておきます。

package.json
{
+ "scripts": {
+   "test": "jest"
+ },
  "devDependencies": {
    "jest": "^25.1.0"
  }
}

まずはお試し

簡単なfunctionを用意してテストしてみましょう。
まずはテスト対象の関数とテストそのものを作ります。

getBigger.js
module.exports = function(a, b) {
    if(a > b) 
    {
        return a
    }
    else
    {
        return b
    }
}
getBigger.test.js
const sum = require('./getBigger');

test('get bigger one 1 or 2', () => {
  expect(sum(1, 2)).toBe(2);
});

この時点でファイル構成は以下の通りになっているはず。

.
├── package.json
├── getBigger.js
└── getBigger.test.js

先ほどpackage.jsonにコマンドを書いてあるので実行します.

npm test

こんな結果になれば成功!

> @ test /Development/jest-sample
> jest

 PASS  ./getBigger.test.js
  ✓ get bigger one 1 or 2 (3ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.349s
Ran all test suites.

Let's TDD

無事テストが実行できたのでこれからはテストし放題です。
簡易TDDとして小さい方を返す関数も作ってみましょう。

まずはテストを作ります。
関数名は先ほどのgetBiggerに合わせてgetSmallerとします。

getSmaller.test.js
const sum = require('./getSmaller');

test('get smaller one 1 or 2', () => {
  expect(sum(1, 2)).toBe(1);
});

当然ですがテスト結果は失敗です。

$ npm test getSmaller

> @ test /Development/jest-sample
> jest "getSmaller"

 FAIL  ./getSmaller.test.js
  ● Test suite failed to run

    Cannot find module './getSmaller' from 'getSmaller.test.js'

    However, Jest was able to find:
        './getSmaller.test.js'

    You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['js', 'json', 'jsx', 'ts', 'tsx', 'node'].

    See https://jestjs.io/docs/en/configuration#modulefileextensions-array-string

    > 1 | const sum = require('./getSmaller');
        | ^
      2 | 
      3 | test('get smaller one 1 or 2', () => {
      4 |   expect(sum(1, 2)).toBe(1);

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:276:11)
      at Object.<anonymous> (getSmaller.test.js:1:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.981s
Ran all test suites matching /getSmaller/i.
npm ERR! Test failed.  See above for more details.

そんな関数ねーよと言われてるので関数のスケルトンを作ります。

getSmaller.js
module.exports = function(a, b) {
}
$npm test getSmaller

> @ test /Development/jest-sample
> jest "getSmaller"

 FAIL  ./getSmaller.test.js
  ✕ get smaller one 1 or 2 (5ms)

  ● get smaller one 1 or 2

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

    Expected: 1
    Received: undefined

      2 | 
      3 | test('get smaller one 1 or 2', () => {
    > 4 |   expect(sum(1, 2)).toBe(1);
        |                     ^
      5 | });

      at Object.<anonymous>.test (getSmaller.test.js:4:21)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.297s
Ran all test suites matching /getSmaller/i.
npm ERR! Test failed.  See above for more details. 

関数は見つかりましたがテスト実行結果がNG、想定通りです。
中身を実装してテストしてみましょう。

module.exports = function(a, b) {
    if(a < b) 
    {
        return a
    }
    else
    {
        return b
    }
}
$ npm test getSmaller

> @ test /Development/jest-sample
> jest "getSmaller"

 PASS  ./getSmaller.test.js
  ✓ get smaller one 1 or 2 (4ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.823s
Ran all test suites matching /getSmaller/i.

無事にテストがパスしました!
お疲れ様でした.

ririli
Podcastやってます。 https://wakateossan.github.io/ 若手とおっさんの年齢差をコンセプトにテック系や健康、時事ネタなどを話しています。
https://www.ririli.net/
Colorkrew
東京・秋葉原にあるIT企業、株式会社Colorkrew。 ”世界のシゴトをたのしくするビジョナリーカンパニー”をビジョンに掲げています。 管理職0(ゼロ)、階層0(ナシ)、 チーム力∞(無限大)の組織運営、バリフラットモデルを策定・導入。OpenWork(旧Vorkers)が選ぶ自由主義で個性を活かす企業、性格のいい会社に上位ランクイン!
https://www.colorkrew.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした