用 Jest 模拟 React 自定义钩子 [英] Mocking React custom hook with Jest
问题描述
在对 React 组件进行单元测试时,我需要模拟我的自定义钩子.我已经阅读了一些关于这个简单任务的教程和 stackoverflow 答案,但没有正确实现它.
I need to mock my custom hook when unit testing React component. I have read few tutorials and stackoverflow answers to this simple task, but without luck to implement it correctly.
我最简单的单一测试设置如下:
My simplest possible setup for single test is as following:
// TestComponent.js
import React from "react";
import useTest from "./useTest";
const TestComponent = () => {
const { state } = useTest("initial_value");
return <div>{state}</div>;
};
export default TestComponent;
// useTest.jsx - simple custom hook
import React, { useState } from "react";
const useTest = (initialState) => {
const [state] = useState(initialState);
return { state };
};
export default useTest;
// TestComponent.test.jsx - my test case
import React from "react";
import { render } from "@testing-library/react";
import TestComponent from "./TestComponent";
jest.mock("./useTest", () => ({
useTest: () => "mocked_value",
}));
test("rendertest", () => {
const component = render(<TestComponent />);
expect(component.container).toHaveTextContent("mocked_value");
});
所以我试图模拟 useTest
自定义钩子以返回mocked_value",而不是initial_value";来自真正的自定义钩子.但上面的代码只是给了我这个错误:
So I trying to mock useTest
custom hook to return "mocked_value", instead of "initial_value" from real custom hook. But above code just gives me this error:
TypeError: (0 , _useTest.default) is not a function
3 |
4 | const TestComponent = () => {
> 5 | const { state } = useTest("initial_value");
| ^
6 |
7 | return <div>{state}</div>;
8 | };
我也试过:
import useTest from './useTest';
// ...
jest.spyOn(useTest, "useTest").mockImplementation(() => "mocked_value");
import useTest from './useTest';
// ...
jest.spyOn(useTest, "useTest").mockReturnValue("mocked_value");
但两者都给我错误 无法监视 useTest 属性,因为它不是函数;
.
如何实施此测试?
推荐答案
我在回答自己.这样它的工作方式:
I'm answering to myself. This way it's working:
jest.mock("./useTest", () => ({
useTest: () => ({ state: 'mocked_value' }),
}));
如果我想在自定义钩子中使用默认导出:
And if I want to use default export in custom hook:
jest.mock("./useTest", () => ({
__esModule: true,
default: () => ({ state: 'mocked_value' }),
}));
另外,如果我还想在我的钩子中使用 setState
方法并导出它,我可以像这样模拟它:
Also, if I want to also use setState
method in my hook and export it, I can mock it like this:
const mockedSetState = jest.fn();
jest.mock("./useTest", () => ({
useTest: () => ({ state, setState: mockedSetState }),
}));
现在可以检查 setState
是否被调用过一次:
And now it's possible to check if setState
has been called once:
expect(mockedSetState).toHaveBeenCalledTimes(1);
这篇关于用 Jest 模拟 React 自定义钩子的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!