gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 10:57:00 25 4
gpt4 key购买 nike

我有一个使用 React Hooks 的功能组件。我有一个更新该组件状态的函数 (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}`);
});
});
});

最佳答案

这一行:

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

关于javascript - React - 在功能组件中测试外部功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55189375/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com