通过Jest在React中的componentDidUpdate中测试prevProps

Question

具有以下代码：

componentDidUpdate(prevProps: JsonInputProps) {
  if (prevProps.value !== this.props.value) {
    this.validateJsonSchema(this.props.value || '');
  }
}

和测试代码：

  it('componentDidUpdate should mount', () => {
    const onChange = jest.fn();
    const event = { target: { value: 'simulate-event' } };
    const wrapper = enzyme
      .shallow(<JsonInput onChange={onChange} onValueChange={mockOnValueChange}/>)
      .simulate('change', event);
    wrapper.setProps({ value: 'example' });
    expect(onChange).toBeCalled;
  });

和测试范围：

我得到了“未采用其他路径”，我不想忽略else路径，但不知道如何更改道具。有想法吗？

Answer 1

要涵盖其他情况，您可以传递相同的prop值以及可能附带的其他内容，以便在更新时涵盖其他情况。

  it('componentDidUpdate should mount', () => {
    const onChange = jest.fn();
    const event = { target: { value: 'simulate-event' } };
    const wrapper = enzyme
      .shallow(<JsonInput onChange={onChange} onValueChange={mockOnValueChange}/>)
      .simulate('change', event);
    wrapper.setProps({ foo: 'something' });
    expect(onChange).toBeCalled;
  });