Jest 测试 React 组件的覆盖率以在单击按钮时调用函数

Question

我有一个功能性的 React 组件，它呈现一个按钮，当单击该按钮时，会使用传递的参数从 props 调用 handleSave 函数。我尝试用测试覆盖组件，但我无法获胜，测试在控制台中崩溃，并出现未调用函数的错误。附上组件和测试代码：

// component
function Modal(props) {
  const { handleSave } = props;

  return (
    <button onClick={() => {handleSave('someInfo')}}>Save</button>
  )
}

// test
describe('ModalComponent', () => {
  it('should call handleSave function', () => {
    const onSaveClickMock = jest.fn();

    const component = mount(<Modal handleSave={onSaveClickMock} />);
    const button = component.find('button');
    button.simulate('click');
    expect(onSaveClickMock).toHaveBeenCalled();
  })
})

据我了解，如果将 handleSave 函数像这样直接传递给 onClick，则此测试实现将起作用：

<button onClick={handleSave}>Save</button>

当函数不只是传递给 onClick 属性，而是使用传递的参数调用时，如何实现测试？

Answer 1

好吧，有a helper method：toHaveBeenCalledWith()（别名 - toBeCalledWith()）：

使用 .toHaveBeenCalledWith 确保调用了模拟函数 有具体的论据。

所以您的测试可能如下所示：

it('should call handleSave function with a predefined value', () => {
  const onSaveClickMock = jest.fn();
  const predefinedValue = 'someInfo';

  const component = mount(<Modal handleSave={onSaveClickMock} />);
  const button = component.find('button');
  button.simulate('click');
  expect(onSaveClickMock).toHaveBeenCalledWith(predefinedValue);
});

请注意，如果您确实向该函数发送预定义值，则应认真考虑将其抽象为常量（并在测试中导入此常量）。这样您就不必在需要时更新此值两次。