酶不能反映状态更新

时间:2018-12-02 08:08:42

标签: reactjs unit-testing redux react-redux enzyme

我正在为连接到Redux存储的React组件编写测试。我要测试的是,当我在商店上分发reset时,组件状态恢复为默认状态。

其想法如下:当调度RESET时,组件将接收真实的reset属性,并在componentWillReceiveProps中将组件状态设置为默认状态。它可以工作,但不能通过测试。如果我连接调试器并运行测试,我可以看到它通过了componentWillReceiveProps中的设置状态,但是当我期望timeLeft的状态为10000时,它仍然是上面设置的1111。我想念什么?这可能不是一种理想的测试方法,但是我是React / Redux组件测试的新手,并且很高兴听到有关改进我的测试方法的最佳实践。

减速器:

const resetReducer = (state, action) => (action.type === 'RESET');

组件:

class Timer extends React.Component {
  componentWillReceiveProps(next) {
    if (next.reset) {
      this.setState({
        timeLeft: 10000,
      });
    }
}

function mapStateToProps(state) {
  return {
    reset: state.reset
  }
}

export default connect(mapStateToProps)(Timer);

测试:

it('Reset', () => {
    // use mount because I need componentWillReceiveProps to run
    const wrapper = mount(<Timer/>);

    wrapper.setState({
      timeLeft: 1111
    });

    store.dispatch({ type: 'RESET' });
    wrapper.update();

    expect(wrapper.state('timeLeft)).toBe(10000);
});

2 个答案:

答案 0 :(得分:2)

您不需要测试Redux功能。您应该隔离并测试您的React代码是否正常工作。

更改此行

class Timer extends React.Component {

export class Timer extends React.Component {

在您的测试文件中

import { Timer } from './file-location';

您可以像这样测试组件的行为

it('Reset', () => {
  const wrapper = mount(<Timer reset={false}/>);

  wrapper.setState({
    timeLeft: 1111
  });
  wrapper.update();
  expect(wrapper.state().timeLeft).toBe(1111);

  wrapper.setProps({ reset: true});
  wrapper.update();
  expect(wrapper.state().timeLeft).toBe(10000);
});

答案 1 :(得分:1)

在编写单元测试时,酶不允许您进行这种测试,因为使用mountshallow可以隔离组件。不再是connected组件。

这就是为什么即使您调用“ RESET”操作,组件也不会收到更改。

在props正确时可以测试组件是否正在更新的操作,您可以像这样更新props:

 wrapper.setProps({ timeLeft: 10000});

这样,您可以强制组件接收道具并检查行为是否符合您的期望。

it('Reset', () => {
    // use mount because I need componentWillReceiveProps to run
    const wrapper = mount(<Timer/>);

    wrapper.setState({
      timeLeft: 1111
    });

    wrapper.setProps({ timeLeft: 10000});
    wrapper.update();

    expect(wrapper.state('timeLeft)).toBe(10000);
});

然后,要测试Reducer,您可以遵循官方文档:https://github.com/reduxjs/redux/blob/master/docs/recipes/WritingTests.md

请记住,单元测试的思想是将所有内容隔离并拆分为代码的一小部分。 如果要测试组件之间的集成,请尝试使用自动化Tets。

希望这对您有用!