Javascript React-测试功能组件中的外部功能

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

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

从“../../helpers/calculate performance time”导入{calculatePerformanceTime}”；
const getChallenge=challengeNumber=>
计算性能时间(
需要（`../../../challenges/${challengeNumber}.js`）[
`dcpChallenge${challengeNumber}`
],
挑战者
);
export const TestComponent=\u=>{
const[inputs，setInputs]=useState（{}）；
const[result，setResult]=useState（{}）；
const evaluateFunction=value=>setResult（getChallenge（value）（输入））；
返回(
evaluateFunction（1）}/>
);
};此行：

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

…将
calculatePerformanceTime
设置为返回
未定义的
的空模拟函数

由于
getChallenge
返回调用
calculatePerformanceTime
的结果，因此它还返回
未定义的

然后，当该行运行时：

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

…它试图使用
getChallenge（…）
的结果作为函数，并使用
输入调用它，但是失败了，因为它试图将
未定义的
作为函数调用


您需要模拟
calculatePerformanceTime
以返回函数：

从“React”导入React；
从“酶-适配器-反应-16”导入适配器；
从“酶”导入{configure，shallow}；
从“/ChallengeSolution”导入{ChallengeSolution}”；
从“../../helpers/calculate performance time”//导入模块
配置（{adapter:newadapter（）}）；
const mockFunction=jest.fn（）；
常量mockInputData=1；
jest.mock（`！raw loader！。/../challenges/1.js`，（）=>“mock_raw”{
虚拟的：真的
});
jest.mock（`！raw loader！。/../challenges/2.js`，（）=>“mock_raw”{
虚拟的：真的
});
const spy=jest.spyOn（calculatePerformanceTimeModule，'calculatePerformanceTime'）；
spy.mockReturnValue（（）=>{/*这返回一个函数…在这里填写返回值*/}）；
描述（“挑战解决方案组件”，（）=>{
让包装纸；
常数tabNumber=2；
在每个之前（（）=>{
包装器=浅（）；
});
描述（“组件安装时”，（）=>{
它（“应该正确地呈现表单”，（）=>{
const title=wrapper.find（“.challenge-solution_uutitle”）；
const button=wrapper.find（“.challenge-solution_u_按钮”）；
按钮。模拟（“单击”）；
期待（间谍）.tohavebeencall（）；//成功！
expect（title.text（））.toEqual（`Daily Coding Solution#${tabNumber}`）；
});
});
});
您可以分享
计算性能时间
的代码和您的测试吗？（您的代码期望
getChallenge
返回一个函数，但我看不到足够多的代码，无法判断是什么原因导致在测试期间该函数中断）我已添加了我正在进行的测试。我认为这个问题是因为该组件是一个功能组件，并且由于
getChallenge
在外部，它无法以某种方式到达它。。。如果你愿意，我可以分享
calculatePerformanceTime
（它很长），尽管
getChallenge
本身就是一个函数，所以
calculatePerformanceTime
的结果无关紧要，你根本不需要测试它。代码不正确。吊钩只能在顶层运行。相反，您创建了一个新函数，稍后将调用钩子。这不是受支持的行为。UPD：或者我可能被你提到的钩子误导了。这个
calculatePerformanceTime
函数是钩子函数还是常规函数？不，
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}`);
    });
  });
});