模仿一个标准的npm项目是很简单的。在node_modules文件夹旁边创建一个__mocks__文件夹，然后将包的名称作为文件，并在其中写入模拟内容。
示例：/__mocks__/axios.ts
我被卡住的地方是有一个看起来像这样的npm包导入：@auth0/auth0-react
如何模拟此文件的内容？我尝试创建一个名为@auth0/auth0-react.tsx的文件，但jest似乎没有选择模拟的文件。当我导入import { Auth0Provider } from '@auth0/auth0-react';和console.log(Auth0Provider)时，我得到的只是标准的Jest.fn()属性。
以下是模拟文件的内容
/* eslint-disable import/prefer-default-export */
export const Auth0Provider = (component: JSX.Element): JSX.Element => component;因为我没有在这个方法上使用jest.fn()，所以我希望console.log(Auth0Provider)显示它包含一个函数。
在我的测试代码中，我在测试之前有jest.mock('@auth0/auth0-react')。有什么想法吗
1条答案
按热度按时间bgtovc5b1#
我通过kcarra的另一个StackOverflow问题找到了解决方案。
总结一下答案，我用两点来回答：
__mocks__目录必须位于正在测试的文件附近。如果您的文件位于/src/MyComponent下，则mocks文件夹的路径应为/src/__mocks__/。__mocks__下的文件夹结构必须模仿导入中显示的路径。在我的场景中，我需要创建一个名为@auth0的文件夹，然后在该文件夹中创建一个名为auth0-react.tsx的文件。下面是我如何构造测试和模拟文件的。
/src/__mocks__/@auth0/auth0-react.tsx/src/__tests__/MyComponent.tsx/src/MyComponent.tsx