Reactでテストを行う まとめ その1
Reactでテストを行う まとめ
Reactのテスト環境を構築する際に色々と調べた結果。
もうツールとか色々ありすぎてわけがわからん。
となったので。
もし自分と同じ境遇にいる人がいたら少しでも手助けになれば良いなと思い、自分が調べたことをまとめておく。
技術スタックは以下となった。
- ES6
- Babel
- Browserify / Webpack
- React
- enzyme
- Mocha
- sinon
- power-assert
ぱっと見、開発を支えてるもので8つもある。 テストでは4つのツールを上手く組み合わせて行う。
enzyme
enzyme 呼び方: エンザイム 意味: 酵素？
2016年2月現在で、GithubStarが8000越え
Reactのドキュメントには 「Airbnbが作ったやつがあってこっちの方が良さげだよ」 的なことが書いてあって本家顔負けな感じ
Document LINK
Reactのコンポーネントテストを良い感じにしてくれる。react-addon-test-utilsなどを使わずにテストできる
- Shallow Rendering
- Full Rendering
- Static Rendering
Mocha
Mocha 呼び方: モカ
Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun.
テスト実行を担う describe/it などのテストのベースとなる機能を提供してくれる
RSpecとかに似てる気がする。 describeでテストの大枠を決め、it内でテストの具体的な内容を定義する。
describe('Test Title', () => {
it('Equal', () => {
const two = 3;
assert(two === 3);
});
}
mochaはアサーションライブラリを自由に選択できる。 chaiかpower-assertで悩んだがpower-assertを採用した 理由は、なるべくシンプルに使えて学習コストが高くないものにしたかった。 power-assertとchaiを比べてみるとchaiの方が文法が豊富いろいろな書き方でテストを書くことができ、柔軟性が高いと感じた。 power-assertはシンプルにassert()だけでいけるのと。テストが失敗した時の出力結果がわかりやすかった。
追記: どうやらpower-assertはNode.jsのAssert APIを拡張したものらしい。
power-assert
power-assert 呼び方: パワーアサート
Power Assert in JavaScript. Provides descriptive assertion messages through standard assert interface. No API is the best API.
Chai
Chai 呼び方: チャイ
アサーションライブラリ power-assertと対照的に豊富なAPIがありテストを書くことができる。
Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework.
