Javascript Jest |如何在onClick事件期间测试组件内的函数是否被调用？

单击

data test=“logout”

按钮时，如何测试是否启动了

handleLogout

功能

const NavBar = props => {
  const handleClick = (e, destination) => {
    e.preventDefault();
    props.history.push(`/${destination || ""}`);
  };

  // Test when data-test="logout" is clicked, handleLogout is called.
  const loginFormat =
    Object.keys(props.userDetails).length === 0 ? (
      <Fragment>
        <button onClick={e => handleClick(e, "login")}>Login</button>
        <button onClick={e => handleClick(e, "register")}>Register</button>
      </Fragment>
    ) : (
      // This button
      <button data-test="logout" onClick={e => handleLogout(e)}>
        Logout
      </button>
    );

  const handleLogout = e => {
    e.preventDefault();
    props.logoutUser();
    handleClick(e);
  };

  return (
    <header className="NavBar">
      <h2>PalettePicker</h2>
      <form className="navbar-form">{loginFormat}</form>
    </header>
  );
};

const-NavBar=props=>{
常量handleClick=（e，目的地）=>{
e、 预防默认值（）；
props.history.push（`/${destination | |”“}`）；
};
//测试单击data Test=“logout”时，将调用handleLogout。
常量登录信息=
Object.keys（props.userDetails）.length==0(
handleClick（e，“login”）}>login
handleClick（e，“寄存器”）}>寄存器
) : (
//这个按钮
handleLogout（e）}>
注销
);
const handleLogout=e=>{
e、 预防默认值（）；
logoutUser（）；
handleClick（e）；
};
返回(
调色板选择器
{loginFormat}
);
};

我目前的尝试：

  let mockUserDetails = { username: "steve", id: 123 };
  beforeEach(() => {
    wrapper = shallow(
      <NavBar
        userDetails={mockUserDetails}
        history={historyMock}
      />
    );
  });

  it("should invoke the handleLogout function when logout is clicked", () => {
    const mock = jest.spyOn(wrapper, "handleLogout");
    const button = wrapper.find('[data-test="logout"]');
    // console.log(button.debug());
    button.simulate("click", { preventDefault() {} });
  });

让mockUserDetails={username:“steve”，id:123}；
在每个之前（（）=>{
包装纸=浅(
);
});
它（“单击注销时应调用handleLogout函数”，（）=>{
const mock=jest.spyOn（包装器，“handleLogout”）；
const button=wrapper.find（'[data test=“logout”]'）；
//console.log（button.debug（））；
模拟（“单击”{preventDefault（）{}}）；
});

---

我收到此错误：

无法监视handleLogout属性，因为它不是函数；由于未定义，因此我甚至无法到达expect块，因为
spyOn
正在抛出错误。。。有什么想法吗？
请看这篇文章。它可能与您的问题没有直接关系，但您不应该测试是否调用了该方法，但与公认的答案一样，您应该测试该方法引起的副作用。代码的问题还在于，您使用的是功能组件，而
handleLogout
函数不是NavBar的属性，因此您无权访问它。
请参阅本文。它可能与您的问题没有直接关系，但您不应该测试是否调用了该方法，但与公认的答案一样，您应该测试该方法引起的副作用。代码的问题还在于您使用的是功能组件，
handleLogout
函数不是NavBar的属性，因此您无法访问它。
您如何初始化包装器？是的，我将Beforeach块添加到prompt中您如何初始化包装器？是的，我将Beforeach块添加到了提示中