yamarkz's blog

紫陽花

Reactでテストを行う まとめ その2

実際にテストを書いていきたい

前記事で紹介したツール。

  • React
  • enzyme
  • Mocha
  • sinon
  • power-assert
  • chai
  • jsdom

アサーションライブラリは好みで選ぶ。今回はpower-assertを使ってみる。

前提

今回はReactのコンポーネントに対してのテストを行います。 かつ、ES6で記述し、Babelでトランスパイルしている。

  • ES6
  • Babel
  • React

パッケージ

下記コマンドを実行し必要なパッケージをインストールします。

npm i -D mocha enzyme react-addons-test-utilds jsdom bable-register power-assert

インストールされたパッケージ

react-addons-test-utilsは直接は利用しないが、enzymeで必要とされるのでインストール

package.jsonには以下のように追加されます

ちなみにパッケージ管理にはyarnがオススメです。

yarn

{
  "devDependencies": {
  "babel-register": "^6.22.0",
  "enzyme": "^2.7.1",
  "eslint-plugin-react": "^6.9.0",
  "jsdom": "^9.9.1",
  "mocha": "^3.2.0",
  "power-assert": "^1.4.2",
  "react-addons-test-utils": "^15.4.2",
  "sinon": "^1.17.7"
  }
}

構成

├── package.json
├── src
│   └── components
│       └── index.js
│
└── test
    ├── .setup.js
    └── components
        └── index.test.js

構成は参考までに。 testディレクトリ以下にテストファイルを置きます。 命名として index.test.jsのように拡張子の前にtestを追加します。

スクリプト

テストを実行するためにスクリプトを定義します。

{
  "scripts": {
    "test": "mocha ./app/test/*.test.js -r ./app/test/.setup.js --compilers js:babel-register"
  }
}

package.jsonに記述することにより、

npm run test

で実行することでテストを実行することができます。 -r ./app/test/.setup.jsと記述することでテストの実行前に.setup.jsをrequireし読み込んだ上でテストが実行されるようになります。

.setup.js

.setup.jsを用意します enzymeを用いてフルレンダリングのテストを行いたい場合、documentオブジェクトや、navigatorオブジェクト、windowオブジェクトにアクセスできる必要があります。 アクセスできる環境を設けるために.setup.jsではjsdomを用いて値をセットしておきます。

LINK

import { jsdom } from 'jsdom';
global.document = jsdom;
global.window = document.defaultView;
global.Element = () => {};
Object.keys(document.defaultView).forEach((property) => {
  if (typeof global[property] === 'undefined') {
    global[property] = document.defaultView[property];
  }
});

global.navigator = {
  userAgent: 'node.js'
};