在使用 jest 触发 forButton Onclick 的函数中测试回调函数答案

【问题标题】：Testing a CallBack function in a function which get triggered forButton Onclick using jest在使用 jest 触发 forButton Onclick 的函数中测试回调函数
【发布时间】：2022-01-01 10:23:07
【问题描述】：

我有一个带有按钮的 React 子组件

export function Banner({argumentSetter}){
function handleOnClick(){
  argumentSetter(argument.READ);
}
return(
<div>
  <Button onClick={handleOnClick}>
    <Icon name="delete" type="filled">
      Discard
    </Icon>
  </Button>
</div>
)
}

我的父组件中的argumentSetter定义如下，

const [argument,setArgument] = useState<Argument>(argument.EDIT);
argumentSetter = useCallBack((val)=>{
setArgument(val);
},[argument]);

return(
  <div>
    <Banner argumentSetter={argumentSetter}/>
  </div>
)

如何使用 jest 获得 100% 的测试覆盖率。

【问题讨论】：

不确定上面的代码中是否大量使用了useCallback。每次argument 更新，argumentSetter 也会更新。直接使用setArgument 作为argumentSetter 的道具可能只是有意义的，因为看起来过度优化实际上可能会降低性能。
我在子组件中设置argumentSetter的值并将其发送回父组件，这就是我以这种方式编写它的原因，我是开玩笑的新手，无法测试它。你能帮我测试一下吗？我现在不介意性能，因为我只担心测试子组件。
您在 Jest 中使用什么库进行 UI 测试？
我正在使用酶
您打算同时测试父组件，还是只测试子组件，即Banner？

标签： reactjs jestjs mocking spy

【解决方案1】：

要测试横幅，您的代码应如下所示

import React from "react";
import { mount } from "enzyme";
import { Banner } from "./Banner.js";
import { argument } from "./arguments.js";

it("Button click leads to argument.READ", async () => {
  let promiseResolve = null;
  const argPromise = new Promise((resolve) => {
    promiseResolve = resolve;
  });
  const argumentSetter = (arg) => promiseResolve(arg);
  const banner = mount(<Banner argumentSetter={argumentSetter} />);
  banner.find("button").simulate("click");
  const newArg = await argPromise;
  expect(newArg).toEqual(argument.READ);
});

解释：

我们创建一个外部可实现的 promise 变量，称为 argPromise，它将在调用 promiseResolve 时解析，在调用 argumentSetter 时调用它。因此，当模拟按钮点击时，它会将更新后的参数解析为newArg 变量（应该是argument.READ），因此您可以测试它是否符合您的期望。

因此，这应该覆盖测试期间横幅组件的所有行。

【讨论】：