reactjs - 使用 toHaveBeenCalledWith 检查 EventTarget

Question

我已经构建了一个自定义 Input呈现 HTML 的 React 组件(想想包装器)输入元素。输入值时，更改会像这样传递给父组件:

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