React - Тестирование внешней функции в функциональном компоненте - PullRequest
Новая
       27

React - Тестирование внешней функции в функциональном компоненте

3 голосов
/ 15 марта 2019

У меня есть функциональный компонент, использующий реагирующие крючки. У меня есть функция, которая обновляет состояние этого компонента (valuFunction ).

Эта функция состояния обновления вызывает внешнюю функцию для извлечения данных, что-то вроде этого: 

import { calculatePerformanceTime } from "../../helpers/calculate-performance-time";

const getChallenge = challengeNumber =>
    calculatePerformanceTime(
        require(`../../../challenges/${challengeNumber}.js`)[
            `dcpChallenge${challengeNumber}`
        ],
        challengeNumber
    );

export const TestComponent = _ => {
    const [inputs, setInputs] = useState({});
    const [result, setResult] = useState({});
    const evaluateFunction = value => setResult(getChallenge(value)(inputs));
    return (
        <div>
          <button onClick={() => evaluateFunction(1)} />
        </div>
    );
};

Когда я имитирую щелчок, чтобы проверить, был ли вызван calculatePerformanceTime, выдается следующее сообщение: 

TypeError: getChallenge(...) is not a function

Я пытался экспортировать getChallenge , но это не сработало.

Как проверить, была ли вызвана эта функция при нажатии на кнопку?

Это то, что я тестировал до сих пор: 

import React from "react";
import Adapter from "enzyme-adapter-react-16";
import { configure, shallow } from "enzyme";
import { ChallengeSolution } from "./ChallengeSolution";
import { calculatePerformanceTime } from "../../helpers/calculate-performance-time";
configure({ adapter: new Adapter() });

const mockFunction = jest.fn();
const mockInputData = 1;

jest.mock(`!raw-loader!../../challenges/1.js`, () => "MOCK_RAW", {
    virtual: true
});

jest.mock(`!raw-loader!../../challenges/2.js`, () => "MOCK_RAW", {
    virtual: true
});

jest.mock("../../helpers/calculate-performance-time.js");

describe("ChallengeSolutionComponent", () => {
    let wrapper;
    const tabNumber = 2;
    beforeEach(() => {
        wrapper = shallow(<ChallengeSolution selectedTab={tabNumber} />);
    });

    describe("when component was mount", () => {
        it("should render form correctly", () => {
            const title = wrapper.find(".challenge-solution__title");
            const button = wrapper.find(".challenge-solution__button");
            button.simulate("click");
            expect(calculatePerformanceTime).toHaveBeenCalled();
            expect(title.text()).toEqual(`Daily Coding Solution #${tabNumber}`);
        });
    });
});

1 Ответ

2 голосов
/ 16 марта 2019

Эта строка: 

jest.mock("../../helpers/calculate-performance-time.js");

... устанавливает calculatePerformanceTime в пустую фиктивную функцию, которая возвращает undefined.

Поскольку getChallenge возвращает результат вызова calculatePerformanceTime, он также возвращает undefined.

Затем, когда эта строка запускается: 

const evaluateFunction = value => setResult(getChallenge(value)(inputs));

... он пытается использовать результат getChallenge(...) как функцию и вызывать его с помощью inputs, но это не удается, потому что он пытается вызвать undefined как функцию.

Вам нужно смоделировать calculatePerformanceTime, чтобы вернуть функцию : 

import React from "react";
import Adapter from "enzyme-adapter-react-16";
import { configure, shallow } from "enzyme";
import { ChallengeSolution } from "./ChallengeSolution";
import * as calculatePerformanceTimeModule from "../../helpers/calculate-performance-time";  // import the module
configure({ adapter: new Adapter() });

const mockFunction = jest.fn();
const mockInputData = 1;

jest.mock(`!raw-loader!../../challenges/1.js`, () => "MOCK_RAW", {
  virtual: true
});

jest.mock(`!raw-loader!../../challenges/2.js`, () => "MOCK_RAW", {
  virtual: true
});

const spy = jest.spyOn(calculatePerformanceTimeModule, 'calculatePerformanceTime');
spy.mockReturnValue(() => { /* this returns a function...fill in the return value here */ });

describe("ChallengeSolutionComponent", () => {
  let wrapper;
  const tabNumber = 2;
  beforeEach(() => {
    wrapper = shallow(<ChallengeSolution selectedTab={tabNumber} />);
  });

  describe("when component was mount", () => {
    it("should render form correctly", () => {
      const title = wrapper.find(".challenge-solution__title");
      const button = wrapper.find(".challenge-solution__button");
      button.simulate("click");
      expect(spy).toHaveBeenCalled();  // Success!
      expect(title.text()).toEqual(`Daily Coding Solution #${tabNumber}`);
    });
  });
});
...