如何模拟包含正斜杠的模块？

Question

模拟标准 npm 项目非常简单。在node_modules文件夹旁边创建一个__mocks__文件夹，然后将包的名称作为文件，并在其中写入mock内容。

例子：/__mocks__/axios.ts

我陷入困境的是有一个 npm 包导入，如下所示：@auth0/auth0-react

我怎样才能模拟这个文件的内容？我尝试创建一个名为@auth0/auth0-react.tsx但 jest 似乎没有拾取模拟文件的文件。当我导入import { Auth0Provider } from '@auth0/auth0-react';and时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')测试之前。有任何想法吗？

Answer 1

我通过 kcarra 的另一个 StackOverflow 问题找到了解决方案。

总结一下答案，我会用两点来回答：

1. 该__mocks__目录必须位于正在测试的文件附近。如果您的文件位于 /src/MyComponent 下，则 mocks 文件夹的路径应该是/src/__mocks__/.

2. 下面的文件夹结构__mocks__必须模拟导入中所示的路径。在我的场景中，我需要创建一个名为 的文件夹@auth0，然后auth0-react.tsx在该文件夹中创建一个名为的文件。

这是我构建测试和模拟文件的方式。

• 嘲笑：/src/__mocks__/@auth0/auth0-react.tsx
• 测试：/src/__tests__/MyComponent.tsx
• 实际组件文件：/src/MyComponent.tsx