在使用jest触发forButton Onclick的函数中测试CallBack函数

Question

我有一个包含按钮的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%的测试覆盖率。

Answer 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)，因此您可以测试它是否符合您的期望。

因此，这应该涵盖测试期间您的Banner组件的所有行。