时间戳

首页 > 解决方案 > 用 Jest Mock 函数测试 onClick

reactjs - 用 Jest Mock 函数测试 onClick

问题描述

我构建了一个 react 应用程序，我试图让自己对测试更加舒适，但我一直在尝试button从我的组件中测试 a。文档非常模糊，我没有找到任何解决方案。

该onClick方法只是简单地调用一个handleClick方法，如下所示Body.js：

  const handleClick = () => {
      console.log('handling click')
  }
  

  return (
    <div className="container">
      I'm the body
      {posts &&
        posts.map((post, i) => {
          return (
            <div key={i}>
              <h1>{post.title}</h1>
              <p>{post.body}</p>
            </div>
          );
        })}
      <Button onClick={handleClick}>Get the posts</Button> // this button
    </div>
  );
};

我在测试中使用模拟函数，如下所示：

  it('button triggers handleClick', () => {
    const fn = jest.fn();
    let tree = create(<Body onClick={fn} />);
    // console.log(tree.debug());
    // simulate btn click
    const button = tree.root.findByType('button');
    button.props.onClick();
    // verify callback
    console.log(fn.mock);
    expect(fn.mock.calls.length).toBe(1);
  });

但我不能断言点击已完成。

expect(received).toBe(expected) // Object.is equality

    Expected: 1
    Received: 0

该handleClick方法有效，因为我在console.log运行测试时获得了所需的输出。

  console.log
    handling click // it works!

      at Object.onClick (src/components/Body.js:9:15)

  console.log
    { calls: [], instances: [], invocationCallOrder: [], results: [] } // fn.mocks log

我会很感激任何帮助。

费尔南多，

标签： reactjsjestjsjest-fetch-mock

解决方案

推荐阅读