我有一个使用react挂钩的功能组件.我有一个更新该组件状态的函数(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> ); };
@H_502_10@当我模拟单击以测试是否调用了calculatePerformanceTime时,会引发以下错误:
TypeError: getChallenge(...) is not a function
@H_502_10@我尝试导出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`,{ 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}`); }); }); });
@H_502_10@
最佳答案
这行:
jest.mock("../../helpers/calculate-performance-time.js");
@H_502_10@…将calculatePerformanceTime设置为返回未定义的空模拟函数.
由于getChallenge返回调用calculatePerformanceTime的结果,因此它也返回未定义.
然后,当此行运行时:
const evaluateFunction = value => setResult(getChallenge(value)(inputs));
@H_502_10@…它尝试将getChallenge(…)的结果用作函数并通过输入调用它,但是失败了,因为它试图将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`,{ virtual: true }); jest.mock(`!raw-loader!../../challenges/2.js`,{ 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}`); }); }); });
@H_502_10@