javascript - 在 React/Redux 中测试——如何保证状态已经更新？

Question

我正在为我的新 React 应用程序编写测试，我对这个项目的部分意图是完全理解这个测试的东西 - 它已经出现在我的雷达上一段时间了，但我之前没有将它投入生产。

到目前为止，使用快照和其他静态和同步方法编写了大量测试。这似乎工作正常，直到现在我正在处理 setState -> expect(postFunctionState).toEqual(desiredState) 情况，而当我通过流程进行 console.log 并且可以看到正在调用 setState() 并且我可以在浏览器中看到结果，但我似乎无法编写复制该行为的测试。

相关代码如下:

//Component (extracted):
export class CorsetCreator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      productName: '',
      productType: 'Overbust',
      enabled: false,
      created: false,
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleNameChange = this.handleNameChange.bind(this);
    this.handleProductChange = this.handleProductChange.bind(this);
  }

  handleNameChange(e) {
    this.setState({ productName: e.target.value });
    this.handleChange.bind(this)(e);
  }

  handleProductChange(e) {
    this.setState({ productType: e.target.value });
    this.handleChange.bind(this)(e);
  }

  handleChange(e) {
    e.preventDefault();

    if (e.target.value === '') {
      this.setState({ enabled: false }); //User should not be able to submit an empty product name
      return;
    }

    const { corsets } = this.props.corsetGallery;
    if (!corsets) {
      this.forceUpdate();
      this.setState({ enabled: true }); //Point of this exercise is to guarantee unique combos of name&type.  If there are no pre-existing corsets then no need to test for uniqueness
      return;
    }

    const productType =
      e.target.value === 'Underbust' || e.target.value === 'Overbust'
        ? e.target.value
        : this.state.productType;
    const productName =
      e.target.value === 'Underbust' || e.target.value === 'Overbust'
        ? this.state
        : e.target.value;

    const filteredCorsets = corsets.filter(
      corset => corset.type === productType && corset.name === productName,
    );

    this.setState({
      enabled: !(filteredCorsets && filteredCorsets.length > 0),
    });
  }

//Test (extracted)
  it('handles statechanges correctly with a valid new corset', () => {
    const store = configureStore({}, browserHistory);

    const creator = mount(
      <Provider store={store}>
        <CorsetCreator />
      </Provider>,
    );

    const namebox = creator.find('NameBox').at(0);
    const nameBoxField = namebox.find('input').at(0);
    const submitbutton = creator.find('SubmitButton').at(0);

    creator.setState({ enabled: false });
    expect(submitbutton.props().enabled).toEqual(false);

    nameBoxField.simulate('change', { target: { value: 'Test' } });
    creator.update();
    expect(creator.state().enabled).toEqual(true);
  });

因为 setState 是异步的，所以我觉得某种回调或 promise 可能是这里的解决方案，但我已经尝试了这两种方法，但似乎无法找出最佳方法。考虑此类场景的最佳方式是什么？

Answer 1

TL;DR:记住 React 组件是函数。在他们所有的荣耀中，他们接受 Prop ，你收到 render() 函数的输出。测试输出。

如果您在状态中有一个变量，您可能会将其传递给子组件或操纵当前组件的视觉输出。或者说状态中的项目是无用的:)

测试状态是多余的，因为它就像测试 React 本身。

人们通常提出的一个问题是“但是我正在使用 setState(...) 显示/隐藏该元素”，或者“我正在将状态传递给其中一个子元素作为 Prop ”。

编写测试时，渲染组件。模拟一个 Action 并检查渲染函数的输出是否发生了变化。

以这个组件为例:

class TextWithClick extends React.Component {
  state={ count: 0 };

  handleClick = () => {
    this.setState({ count: this.state.count + 1})
  }

  render() {
    return (
      <input
        value={this.state.count} {/* state passed down as props */}
        onClick={this.handleClick}
        />
    )
  }
}

ReactDOM.render(<TextWithClick/>
  , document.getElementById('root'))

很简单。单击输入字段，增加它显示的文本，这是一个 Prop 。以下是一些测试断言:

// using enzyme
it("should increase the count", () => {
  const wrapper = shallow(<TextWithClick />);
  const input = wrapper.find("input").at(0);

  // test props
  input.simulate("click");
  expect(input.props().value).toEqual(1);

  input.simulate("click");
  expect(input.props().value).toEqual(2);

  input.simulate("click");
  expect(input.state().count).toEqual(3); // this tests React more than your component logic :)
});

记住 React 组件是函数。在他们所有的荣耀中，他们接受 Prop ，你收到 render() 函数的输出。测试输出。

在 Redux 的情况下，同样的事情。测试状态变化就像测试 Redux 的 connect() 功能。 Mozilla 使用 real redux store to test their app . IE。测试最终输出。

我引用了上面关于测试 React/Redux 应用程序的链接(似乎无法在 SO 中使用多行 block 引号:

• “我们分派(dispatch)真正的 Redux 操作来测试应用程序状态变化。我们使用浅层渲染对每个组件只测试一次。
• “我们尽可能地抵制完整的 DOM 渲染(使用 mount())。
• “我们通过检查属性来测试组件集成。
• “静态类型有助于验证我们的组件属性。
• “我们模​​拟用户事件并对分派(dispatch)的操作做出断言。

一篇好文章:Testing React Component’s State作者 Anthony Ng。