dispatch(action) 不会立即更新单元测试中的 redux 状态

Question

我正在为我的基于 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 测试 shown here 非常简单，但它们似乎工作正常。

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

Answer 1

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

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

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

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 将状态作为道具传递到组件中，因此您可以使用一些代表您感兴趣的状态的测试道具来渲染 unconnected 组件，而无需设置商店和提供者：

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