Question

我正在尝试运行一个简单的单元测试，试图模拟一个按钮单击事件。由于某种原因，我的模拟方法没有被调用。这是React JS文件：

import React from "react";

function SuperTest(props) {
  const login = (e) => {
    props.onClick();
    console.log("Somebody clicked me!!!");
  };

  return (
    <div id="header" className="header-container">
      <button type="button" id="loginBtn" text="Login" onClick={login} />
    </div>
  );
}

export default SuperTest;

这是单元测试：

import React from "react";
import { render } from "@testing-library/react";
import { shallow, mount } from "enzyme";
import SuperTest from "../components/SuperTest";

describe("Click tests", () => {
  it("testing login click", () => {
    const clickMock = jest.fn();
    const wrapper = mount(<SuperTest onClick={clickMock} />);
    const btn = wrapper.find("#header");
    if (btn) btn.simulate("click");
    expect(clickMock.mock.calls.length).toBe(1);
  });
});

这是我得到的单元测试运行的结果。

src/tests/LoginAccountSelector.test.js
  ● Click tests › testing login click

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

    Expected: 1
    Received: 0

      32 |     const btn = wrapper.find("#header");
      33 |     if (btn) btn.simulate("click");
    > 34 |     expect(clickMock.mock.calls.length).toBe(1);
         |                                         ^
      35 |   });
      36 | });
      37 | 

      at Object.it (src/tests/LoginAccountSelector.test.js:34:41)

有人可以指出我在这里犯错吗？

Answer 1

尝试这种方法，

describe("Click tests", () => {
      it("testing login click", () => {
        const clickMock = jest.fn();
        const wrapper = mount(<SuperTest onClick={clickMock} />);
        const btn = wrapper.find("#loginBtn");
        if (btn) btn.simulate("click");
        expect(clickMock.mock.calls.length).toBe(1);
      });
    });

模拟一个按钮，单击React with Jest和Enzyme

1 个答案: