使用 React 测试库监视函数组件内的函数答案

【问题标题】：Spy on a function inside function component using React testing library使用 React 测试库监视函数组件内的函数
【发布时间】：2021-11-17 06:14:55
【问题描述】：

我正在尝试使用反应测试库来监视函数组件中的函数。我想测试是否在单击按钮时调用了handleClick函数。

这是我的代码的摘录

组件

const Foo = () => {
  
  const handleClick = () => {}

  return <div>
     <button data-testid="button" onClick={handleClick}>Continue</button>
  </div>
}

测试用例

  it("should handle continue button click", async () => {
    const { getByTestId } = render(<Foo />);
    const button = getByTestId("button");
    const spy = jest.spyOn(Foo, "handleClick");
    act(() => {
      fireEvent.click(button);
    });
    expect(spy).toHaveBeenCalled();
  });

我得到的错误如下

Cannot spy the handleClick property because it is not a function; undefined given instead

有人可以帮忙吗？

【问题讨论】：

测试内部实现细节并不是 React 测试库的目的。使用组件的 API 进行测试，即它是 props 和它的 UI。您的组件似乎也缺少 "button" 测试 ID，因此查询将无法定位按钮元素。由于组件不是类，因此没有实例可以获取方法/属性引用。
在函数内部定义的函数不是神奇地是外部函数的属性。不要测试实现；测试 behaviour handleClick 提供。
这里忘记说了。但是，我添加了data-testid@DrewReese
@jonrsharpe 是有道理的，所以如果我使用反应测试库，我不必监视任何东西。当用户在 UI 上执行操作时，我只需要测试预期的结果。
你可能需要监视一些东西，但测试替身是为合作者而不是你应该测试的东西。

标签： javascript reactjs jestjs react-testing-library

【解决方案1】：

您正试图监视 handleClick，就好像它是 Foo 的一个属性，它是一个函数。

我可以将 handleClick 移动到另一个文件中，并在组件和测试中都导入它：

handler.js

export const handleClick = () => {}

组件

import { handleClick } from './handler.js'
const Foo = () => {

return <div>
   <button data-testid="button" onClick={handleClick}>Continue</button>
</div>
}

测试用例

import * as handlers from './handler.js';

it("should handle continue button click", async () => {
  const { getByTestId } = render(<Foo />);
  const button = getByTestId("button");
  const spy = jest.spyOn(handlers, "handleClick");
  act(() => {
    fireEvent.click(button);
  });
  expect(spy).toHaveBeenCalled();
});

【讨论】：

【解决方案2】：

您不想监视handleClick。相反，您想测试handleClick 对组件的影响。您的 handleClick 回调是一个实现细节，作为一般规则，您不会对其进行测试。

【讨论】：