LAST UPDATE: June 24, 2017. Original writing: May 19, 2016. I have been using Jest since its beginnings. I won’t lie, the path has been painful: Things like updating from version 0.x.0 to version 0.y.0 (specially to version 0.4.0) was particularly terrible for my tests. Furthermore, I struggled myself more than once with the way Jest works and I even bothered the community with questions like 1, 2
TL;DR: This is how I currently approach testing React/Redux Applications.Minimal component tests: verify that the component actually renders.Avoid testing implementation details.Verify important callbacks and other props, but keep it minimal.The need to test logic inside a component might signal the need for refactoring.Using Eslint, PropTypes and Flow will add value.Test reducers as they are func
昨日はUnitテストの設定方法からComponentのユニットテストまで説明しました。今日は、ロジックのテストを解説します。React Nativeでアプリを作る場合は、Fluxアーキテクチャを選ぶと思います。Reduxはその中でも秀逸であり、Testの方法もしっかりドキュメントされています。 アプリのロジックをReduxを用いてテストしていきます。実はここはReact Nativeに限った話ではないかもしれません。しかし、Objective-Cやswiftでしっかりロジックのテストを書くのは難しい（私のswiftスキルがないのが原因だと思いますが。。）ように感じます。個人的にはアプリに状態を持たせて、それをテストできるというReduxの真骨頂がここにあるような気がしています。 Testing store with dispatch Reduxのドキュメントではactionとreducer
function increment() { return { type : COUNTER_INCREMENT }; } export class Counter extends React.Component { static propTypes = { dispatch: React.PropTypes.func.isRequired, counter: React.PropTypes.number, } constructor() { super(); } render() { return ( <div className='container text-center'> <h1>Sample Counter</h1> <h2>{this.props.counter}</h2> <button onClick={this.props.dispatch(increment)}> I
概要 reduxでreducerのテストをしたく、以下の様な記事を書いた。 React+ReduxのAction、Reducerを個別にテストする - Qiita モックしたデータをstore.dispatchするという方法をとっていたが、これも、reducer実行終了時まで待つ必要があるため、タイミングを担保するのが難しい。そこで、別の方針でテストすることにした。 方針 reduxのドキュメントを参考にすると、dispatchをせず、直接reducer関数を実行している。同じように実装することにした。 Writing Tests | Redux // createReducerは以下の様なutilメソッドを用意しておく // export function createReducer (initialState, reducerMap) { // return (state = init
import { REQUEST, REQUEST_SUCCESS, } from 'constants'; import { createStoreForActionTest } from 'utils/test'; import { fetchSomeResource } from './action.js'; describe('(Action)', function() { const initialState = { items: [], isFetching: false, }; const expectedActions = [ { type: REQUEST }, { type: REQUEST_SUCCESS, items: ['items'] }, ]; it('REQUEST, REQUEST_SUCCESS が disapatch されること', (done) =>
概要 Reactでユニットテストをしたく、コンポーネントのテストであれば以下の様な記事を参考にすればできそうだが、Fluxをつかったアプリで、ActionやDispatcherにロジックがある時には、それでは十分で無いと考えた。 React.js + Jest - Qiita 今回はReact+Reduxを使っているので、Action、Reducerを個別にテストする方針を考えた。テストフレームワークは、karma+jasmineを使用している。 Action テストするactionは以下の様なものを想定している。単純にAPIを叩いてresを得るというもの。 import { REQUEST, REQUEST_SUCCESS, } from 'constants'; // リソース管理はsuperagent import request from 'superagent'; functio
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
