如何使用 TypeScript 模拟 useUser 这个自定义钩子

Question

假设我们有一个名为 useUser 的自定义挂钩

const useUser = (): IUser => useContext(MiniAppContext).user;

然后在另一个组件中使用

import { useUser } from '@ABC'

const { monitoring } = useUser(); // please note that monitoring is an object having property id

当我们运行测试用例时，显示

TypeError: xxxx.useUser is not a function

我使用下面的代码通过了单元测试，但我知道这已经足够好了。请让我知道这方面的最佳做法是什么。提前致谢。

更新：

jest.mock('@ABC', () => ({
   userUser: () => ({monitoring: {}} as IUser)
}));

Answer 1

一个想法是创建一个模拟自定义挂钩的 util 函数：

import * as useUserHook from '@ABC';

function generateUseUserHook(mock?: IUser): IUser {
    const value: IUser = {
        monitoring: jest.fn(),
        // mock return value (you can use faker)
        ...mock
    };

    jest.spyOn(useUserHook, 'useUser').mockReturnValue(value);

    return value;
}

而不是 jest.mock。

如何使用 TypeScript 模拟 useUser 这个自定义钩子

how to mock useUser this custom hook using TypeScript

typescript

reactjs

jestjs