Jest 手动模拟在 CRA 中不使用模拟文件

Question

我有一个 CRA 应用程序，正在尝试使用Jest的手动模拟功能，但我的手动模拟似乎没有应用。

我使用的基本网址src（通过在 中设置tsconfig.json）。简化，我有一个文件结构

src/
|- components/
|-- Foo/
|--- index.js
|--- Foo.jsx
|- App.js
|- App.test.js

在哪里App.js使用import Foo from "components/Foo". 在App.test.js我想Foo被嘲笑（它的计算量很大并在单元测试中进行了测试）。所以在我的测试中，我添加了，jest.mock("components/Foo")并在绝望中添加了几个__mocks__文件夹，例如

__mocks__
|- components\
|-- Foo.jsx
src/
|- __mocks__/
|-- components/
|--- Foo.jsx
|- components/
|-- Foo/
|--- __mocks__
|---- Foo.js
|--- index.js
|--- Foo.jsx
|- App.js
|- App.test.js

每个手动模拟包含

console.log("Mock imported");

export default function MyMock(){
  console.log("Mock used");
  return <p />;
}

但是，在运行测试时，没有来自模拟的控制台打印输出，尽管Foo分配了一个空的模拟，但它不使用预期的手动模拟。

我做错了什么？

Answer 1

创建模拟分为 3 个步骤：

1. 在App.js import Foo from 'components/Foo'进口中Foo/index.js。内部组件创建__mocks__/Foo/index.js并导出模拟组件。
2. 在项目根目录中为 jest 创建一个安装文件jest.setup.js并声明jest.mock('src/components/Foo')
3. 在 jest 配置中，添加选项setupFilesAfterEnv: ['./jest.setup.js']