如何在Jest中mock包含斜杠的scoped npm包模块？

核心问题为带@前缀的作用域npm包，不能直接将完整包名作为单个mock文件名，需要按目录层级拆分创建mock文件，你之前创建@auth0/auth0-react.tsx单文件的写法Jest无法识别。

正确的目录配置 #

你需要在和node_modules同级的__mocks__目录下按以下结构创建文件：

__mocks__/
└── @auth0/
    └── auth0-react.tsx

auth0-react.tsx文件内容保持你原来的编写逻辑即可：

/* eslint-disable import/prefer-default-export */
export const Auth0Provider = (component: JSX.Element): JSX.Element => component;

其他必要检查项 #

• 确认jest.mock('@auth0/auth0-react')语句放在测试文件的最顶部，早于所有业务代码的import语句，不要写在测试用例内部或者import语句之后
• 如果你项目的Jest配置自定义了moduleFileExtensions字段，确认ts、tsx后缀在配置列表中
• 若你需要用到原包的其他导出成员，需要在mock文件中对应补充导出，避免业务代码导入时报undefined错误

配置完成后重新运行测试，console.log(Auth0Provider)就会输出你定义的普通函数，而非默认的Jest.fn()实例。

内容的提问来源于stack exchange，提问作者Alex