Question

我正在为连接到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);
});

Answer 1

您不需要测试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);
});

Answer 2

在编写单元测试时，酶不允许您进行这种测试，因为使用mount和shallow可以隔离组件。不再是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。

希望这对您有用！

酶不能反映状态更新

2 个答案: