通過 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;
  });

和測試覆蓋率：

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

Answer 1

為了覆蓋其他情況，您可以傳遞相同的道具值以及可能的其他內容，以便在更新時覆蓋其他情況。

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