React - 在功能组件中测试外部功能

Question

我有一个使用反应钩的功能组件。 我有一个更新该组件状态的函数（ evaluateFunction ）。

此更新状态函数调用外部函数来检索数据，如下所示：

 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}`); }); }); }); 

Answer 1

这一行：

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}`);
    });
  });
});