Question

我正在根据react和redux为我的应用程序编写测试用例。

getJSONObject();

使用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中间件进行异步操作调度。这会干扰吗？如果是，我该如何等待异步操作完成？

更新

redux测试shown here非常简单，但它们似乎工作正常。

thunk

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将状态作为道具传递到组件中，您可以使用一些表示您感兴趣的状态的测试道具呈现非connect ed组件，同样无需设置商店和提供者：

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

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

1 个答案: