Как протестировать лямбда-функции в функциональном компоненте React с помощью Jest / Enzyme?

Question

Я пытаюсь создать раскрывающуюся вкладку, однако я не смог приблизиться к добавлению какой-либо функциональности, потому что я пытаюсь использовать этот стиль TDD, и я не смог даже проверить, работает ли функция внутри компонентасрабатывает на событие нажатия кнопки.Журналы шуток говорят мне, что объект, на который я пытаюсь ссылаться, не является функцией.

Я попытался создать экземпляр тестируемого компонента и предоставил его в качестве аргумента для «ожидания».Функция с использованием функции "toBeCalled" в качестве сопоставителя это не сработало.

Сам компонент:

import React from "react";
import headerImg from "./headerImg.png";

function PullDown() {
  const displayUPC = () => {};

  return <button onClick={displayUPC} />;
}
export default PullDown;

Тесты для компонента:

import React from "react";
import ReactDOM from "react-dom";
import { shallow, mount, configure, instance } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import PullDown from "./PullDown";
import enzyme from "enzyme";

configure({ adapter: new Adapter() });

describe("Pulldown tab", () => {
  let wrapperPulldown;
  beforeEach(() => {
    wrapperPulldown = shallow(<PullDown />);
  });

  it("should render", () => {
    expect(wrapperPulldown.find("button")).toHaveLength(1);
  });

  it("should be clickable", () => {
    wrapperPulldown.find("button").simulate("click");
    expect(wrapperPulldown.displayUPC()).toBeCalled();
  });
});

Я ожидаю, что тест не пройден, и это произойдет, однако, когда я иду идобавьте функцию к компоненту и добавьте onClick с функцией, прикрепленной к кнопке, тест все равно не пройден. Что заставляет меня чувствовать, что я не выполнил тест правильно.

Answer 1

Как указано выше, причина в том, что функция не существует в ReactWrapper, так как это всего лишь экземпляр вокруг визуализированного вывода. Кроме того, вы не можете проверить вызов функции так же, как в обычном компоненте, основанном на классе, так как он не является свойством класса, например Pulldown.displayUPC.

Однако есть несколько способов проверить похожую функциональность:

Если возможно, сделайте так, чтобы компонент не имел скрытых зависимостей, и передайте ссылки на функции через реквизиты. Однако это не всегда возможно, если все ваши компоненты работают.

// PullDown.js
function PullDown({displayUPC}) {
  return <button onClick={displayUPC} />;
}
export default PullDown;

// PullDown.spec.js
describe("Pulldown tab", () => {
  let wrapperPulldown;
  let displayUPC;

  beforeEach(() => {
    displayUPC = jest.fn();
  });

  // ... some tests

  it("should be clickable", () => {
    wrapperPulldown = shallow(<PullDown displayUPC={displayUPC} />);
    wrapperPulldown.find("button").simulate("click");
    expect(displayUPC).toBeCalled();
  });
});

Другой способ добиться этого, если вы не можете позволить себе передать ссылку на функцию через реквизит, - это определить функцию вне компонента.

// PullDown.js
export const displayUPC = () => {};
function PullDown() {
  return <button onClick={displayUPC} />;
}
export default PullDown;

// PullDown.spec.js
import * as pullDownModule from './PullDown.js';
describe("Pulldown tab", () => {
  let wrapperPulldown;

  beforeEach(() => {
    jest.spyOn(pullDownModule, 'displayUPC');
    wrapperPulldown = shallow(<PullDown />);
  });

  // ... some tests

  it("should be clickable", () => {
    wrapperPulldown.find("button").simulate("click");
    expect(pullDownModule.displayUPC).toBeCalled();
  });
});