spyOn HTMLElement onClick 处理程序

Question

我想检查 a link 标签是否可点击。所以我 spyOn HTMLElement.click，但 toBeCalled 让我显示错误。

我是不是做错了方法？

假设我的 link 标签如下所示

import MySomeAPI from "./API";
const SomeComponent = () => {


 return (
    <a herf="#" onClick={() => {
     MySomeAPI.call()
     // this is synchronous call
     }}
    >
    text
    </a>
 )
}

const { queryByTestId } = render(<SomeComponent {...props} />);

const linkTag = getByTestId("someLink");
// I checked linkTag gives me HTMLElement


const spy = jest.spyOn(linkTag, "click");
userEvent.click(linkTag);
expect(spy).toBeCalled()

一个可能的答案是 spyOn MySomeAPI.call，并检查它是否被调用。但是，我想如果我能完全监视 onClick 处理程序会更好。

Answer 1

如果你不能访问它，你就不能监视它。 onClick 是在函数组件范围内定义的匿名函数。它是私有的，你无法在调用方获取它（在测试用例中）。

此外，监视点击事件处理程序并检查它是否被调用，更多地关注实现细节。不推荐这种测试策略。相反，您应该测试组件的行为。

您应该测试：当用户单击按钮时，您的组件发生了什么变化。例如。组件呈现什么视图？

您可以模拟 MySomeAPI.call 等副作用方法及其 resolved/rejected 值以进行单元测试。 API调用returns后，设置组件状态，并根据状态渲染对应的view。

你应该测试这些。

spyOn HTMLElement onClick 处理程序

spyOn HTMLElement onClick handler

reactjs

jestjs

react-testing-library