30歳からのプログラミング

30歳無職から独学でプログラミングを開始した人間の記録。

JestでReactのテストをする(1)　導入編

React Jest

先日、以下の記事を見つけた。

Facebook製のJavaScriptテストツール「Jest」の逆引き使用例 - Qiita

非常に分かりやすくまとまっており、「これなら自分にも出来るかも」と思えた。
この記事では例としてReactをテストしており、丁度Reactのテスト方法を探していたこともあり、挑戦してみることにした。

環境構築

まずは環境構築を構築していく。

mkdir jest   // ディレクトリを作成
cd jest // ディレクトリに移動
npm init    // package.jsonを作成
npm install jest -S // jestをインストール

次に、package.jsonを編集。

{
  ･･･
  "scripts": {
    "test": "jest"
  },
  ･･･
}

これで、npm run testでjestが実行されるようになった。

だがこの時点ではテストファイルがないので、実行してもNo tests foundとなる。

そこで、実行用のテストファイルを作ってみる。

// first.js

describe('first test', ()=>{
    test('equal', ()=>{
        expect(1).toBe(1);
    });
});

この時点でのディレクトリ構成。

  • node_modules
  • package.json
  • first.js

この状態でコマンドを実行してみる。

npm run test
npm run test first.js

どちらも結果はNo tests found。
実は、jestの対象にするためには、ファイル名の末尾を.test.jsか.spec.jsにする必要がある。
ということで、first.jsをfirst.test.jsにする。

すると、以下のどちらのコマンドでも、テストが実行される。

npm run test
npm run test first.test.js

さらに、second.test.jsを作成する。

// second.test.js

describe('first test', ()=>{
    test('equal', ()=>{
        expect(1).not.toBe(9);
    });
});

この時点でのディレクトリ構成。

  • node_modules
  • package.json
  • first.test.js
  • second.test.js

この状態でnpm run testを実行すると、first.test.jsとsecond.test.js、両方が実行される。
もちろん、npm run test second.test.jsのように個別に実行することも出来る。

次に、__tests__とディレクトリを作り、その中に、first.hoge.jsというファイルを作る。ファイルの中身はfirst.test.jsと同じ。

この時点でのディレクトリ構成。

  • __tests__
  • node_modules
  • package.json
  • first.test.js
  • second.test.js

この状態でnpm run testを実行すると、3つのテストファイル全てが実行される。

先程、ファイル名の末尾が.test.jsか.spec.jsになっているものがJest対象になると書いたが、__tests__ディレクトリに入っているものも対象になる。こちらは、ファイル名は関係ない。

そしてnpm run testは、対象となるテストファイルを全て実行する。
npm run test __tests__とすると、__tests__ディレクトリの中身だけが対象になる。

以降は分かりやすくするため、テストファイルは全て__tests__ディレクトリに入れることにする。

この時点でのディレクトリ構成。

  • __tests__
  • node_modules
  • package.json

実践

product.jsに開発中のコードがあり、それをテストする、というケースを想定してやってみる。

// product.js

function addNum(a,b){
  return a+b;
};
export {addNum};

このコードのaddNum()という関数をテストする。そのためのテストコードを、__tests__/product.test.jsに書く。

// product.test.js

import {addNum} from '../product.js';

describe('product', ()=>{
  test('addNum', ()=>{
    expect(addNum(2,3)).toBe(5);
    expect(addNum(9,9)).toBe(18);
    expect(addNum(1,5)).not.toBe(7);
  });
});

この時点でのディレクトリ構成。

  • __tests__
    • product.test.js
  • node_modules
  • package.json
  • product.js

この状態でnpm run testを実行すると、無事にテストが実行される。

 PASS  __tests__/product.test.js
  product
    ✓ addNum (3ms)

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

Reactの導入

ここまでで、Jestそのもののセットアップは終わった。
次は、ReactをJestでテストする、という状態を目指していく。

まずは、Reactを使うための環境を整えていく。

reactとreact-domをインストール。

npm install -S react react-dom

次に、JSXのプリコンパイルなどに必要なパッケージをインストールしていく。

npm install -S babelify babel-preset-es2015 babel-preset-react

.babelrcというファイルを作成し、次のように記述する。

{
  "presets": ["react", "es2015"]
}

browserifyがグローバルにインストールされていなければ、それも行う。

npm install -g browserify

このように設定すると、次のコマンドでビルドできる。

browserify -t babelify 元となるファイル -o ビルドするファイル

これで、Reactを使うための環境は整った。

この時点でのディレクトリ構成。

  • __tests__
    • product.test.js
  • .babelrc
  • node_modules
  • package.json
  • product.js

この時点でインストールされているnpmモジュール。

  • babel-preset-es2015@6.16.0
  • babel-preset-react@6.16.0
  • babelify@7.3.0
  • jest@16.0.1
  • react@15.3.2
  • react-dom@15.3.2

これ以外に、browserifyがグローバルインストールされている。

これで、Reactを使った開発が出来るようになった。
次はいよいよ、JestでReactのテストを行う。