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がオススメです。
{ "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を用いて値をセットしておきます。
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' };