Question

我已经构建了一个自定义的Input React组件（包装器），该组件呈现了一个HTML输入元素。输入值后，更改将被传递到父组件，如下所示：

const handleChange = (event: SyntheticInputEvent<EventTarget>) => {
  setCurrentValue(event.target.value);
  props.onChange(event);
};

一切正常，但现在我要为此编写测试：

it('Should render a Text Input', () => {
  const onChange = jest.fn();

  const { queryByTestId } = renderDom(
    <Input type={InputTypesEnum.TEXT} name='car' onChange={onChange} />
  );

  const textInput = queryByTestId('text-input');
  expect(textInput).toBeTruthy();

  const event = fireEvent.change(textInput, { target: { value: 'Ford' }});
  expect(onChange).toHaveBeenCalledTimes(1);
});

除了我要使用expect添加最后一个toHaveBeenCalledWith之外，这也很好用。我尝试了几件事，但不知道如何去做。有什么想法吗？

更新：我一直在阅读：https://reactjs.org/docs/events.html#event-pooling。看来，如果我这样更改handleChange：

const handleChange = (event: SyntheticInputEvent<EventTarget>) => {
  event.persist();
  setCurrentValue(event.target.value);
  props.onChange(event);
};

然后从onChange接收到的对象确实更改为包括我的测试数据。就是说，我不喜欢仅仅为了容纳测试而更改生产代码的重要功能（在这种情况下，是事件池）的想法。

Answer 1

你可以用 toHaveBeenCalledWith

做这样的事情

expect(onChange).toHaveBeenCalledWith(
    expect.objectContaining({
      target: expect.objectContaining({
        value: "Ford"
      })
    })
  );

使用toHaveBeenCalledWith检查EventTarget

1 个答案: