Блог

Главная - Вопросы по программированию - Имитация нажатия кнопки в React с помощью Jest и Enzyme

Имитация нажатия кнопки в React с помощью Jest и Enzyme

#reactjs #unit-testing #jestjs #mocking #enzyme

#reactjs #модульное тестирование #jestjs #издевательство #enzyme

Вопрос:

Я пытаюсь запустить простой модульный тест, который пытается имитировать событие нажатия кнопки. По какой-то причине мой метод mock не вызывается. Вот файл 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)

Может кто-нибудь указать мне, что я здесь делаю неправильно?

Комментарии:

1. SuperTest не имеет никаких реквизитов, когда вы проходите onClick

2. login должен вызвать props.onClick .

3. Не могли бы вы предоставить пример рабочего кода, пожалуйста? @DrewReese

4. Нет, просто измените SuperTest , чтобы использовать onClick prop и вызвать его в login функции, которая уже подключена к onClick обработчику button элемента.

5. const btn = wrapper.find(«#loginBtn»);

Ответ №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);
      });
    });