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-creatorsor不会有任何问题reducers。

我在这里做错了吗？顺便说一句，我正在使用thunk中间件进行异步操作分派。这会干扰这里吗？如果是，我如何等到异步操作完成？

更新：

此处显示的 redux 测试非常简单，但它们似乎工作正常。

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

1 回答 1

6

redux 的巨大好处之一是它允许您使用纯函数和纯组件来实现几乎所有的应用程序。Redux 和 react-redux 抽象了订阅 UI 到状态更改的实现细节，这允许您单独测试所有应用程序的代码。这样一来，您就不需要在每次想要测试代码时都使用商店渲染提供程序，这大大降低了复杂性。

假设key您的状态中有一个属性和一个KeyDisplay组件。您可以使用以下减速器文件实现状态：

减速器.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 的单元测试中，您可以只导入 reducerkey并完全独立于用户界面进行测试：

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');
});

此外，由于connect将 state 作为 props 传递给组件，因此您可以connect使用一些表示您感兴趣的状态的测试 props 来渲染 uned 组件，而无需设置 store 和 provider：

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 回答