6

私は、react と redux に基づいてアプリケーションのテスト ケースを作成しています。

container = TestUtils.renderIntoDocument(
  <Provider store={createStore({"key": "old_val"})}>
    {() => <Component />}
  </Provider>
);

でレンダリングした後initialState、アクションをディスパッチして、状態が変化するかどうかを確認します。

Component.store.dispatch({ type: 'SET_VAL', value: 'some_val' });

次に、状態を出力します

console.log(store.getState());

私は状態がであることを期待しています{"key": "some_val"}。ただし、まだ表示されます{"key": "old_val"}。

action-creatorsテストではなく、アプリケーションは正常に動作するため、またはに問題はありませんreducers。

ここで何か間違ったことをしていますか？ところで、thunk非同期アクションのディスパッチにミドルウェアを使用しています。それはここで干渉しますか？はいの場合、非同期アクションが完了するまで待つにはどうすればよいですか?

アップデート：

ここに示すredux テストは非常に簡単ですが、問題なく動作しているようです。

store.dispatch(addTodo('Hello'));
expect(store.getState()).toEqual([{
  id: 1,
  text: 'Hello'
}]);
4

1 に答える 1

6

redux の大きな利点の 1 つは、純粋な関数と純粋なコンポーネントを使用してほぼすべてのアプリケーションを実装できることです。Redux と react-redux は、サブスクライブ UI の実装の詳細を状態の変更に抽象化します。これにより、アプリのすべてのコードを分離してテストできます。こうすることで、コードをテストするたびにプロバイダーをストアでレンダリングする必要がなくなり、複雑さが大幅に軽減されます。

状態とコンポーネントkeyにプロパティがあるとしましょう。KeyDisplay次のレデューサー ファイルを使用して状態を実装できます。

reducers.js

import { combineReducers } from 'redux';

export function key(state, { type, value }) {
  switch(type) {
    case 'SET_VAL': return value;
    default: return state;
  }
}

export default combineReducers({ key });

また、コンポーネント用のファイルを設定できます。

KeyDisplay.js

import React from 'react';
import { connect } from 'react-redux';

export function KeyDisplay({ keyProp }) {
  return (
    <div>The key is {keyProp}</div>
  );
}

export default connect((state) => { keyProp: state.key })(KeyDisplay);

次に、reduce の単体テストで、reducer のみをインポートしてkey、ユーザー インターフェイスとは完全に切り離してテストできます。

keyReducer.test.js

import test from 'tape';
import { key } from './reducers.js';

test('key reducer', (t) => {
  t.plan(1);
  const output = key('old', { type: 'SET_VAL', value: 'new' });
  t.equal(output, 'new', 'SET_VAL should override old value');
});

さらに、状態を props としてコンポーネントに渡すため、ストアとプロバイダーを設定することなく、関心のある状態を表すいくつかのテスト props をconnect使用して un ed コンポーネントをレンダリングできます。connect

KeyDisplay.test.js

import test from 'tape';
import { renderIntoDocument } from 'react-addons-test-utils';
import { KeyDisplay } from './KeyDisplay.js';

test('KeyDisplay', (t) => {
  const component = renderIntoDocument(<KeyDisplay keyProp="test" />);
  // test component
});
于 2015-10-04T22:25:11.793 に答える