i具有使用React Hooks的功能组件。我的功能可以更新该组件的状态( esturefulction )。
此更新状态函数调用用于检索数据的外部函数,类似的内容:
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}`);
});
});
});
此行:
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}`);
});
});
});