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

Question

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

我使用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

我发现您的文件结构不正确。 __mocks__ 目录应该直接在 components 下

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

现在主模块目录上的 Foo.js 可以是这样的

function Foo() {
    return (
     
       <h1> Foo</h1>
    );
  }

  export default Foo;

而 __mocks/Foo.js 可以是

console.log("Mock imported");

function Foo() {
    return (
     
       <h1> Mock</h1>
    );
  }

  export default Foo;

App.test.js 将包含 jest.mock 调用

import { render, screen } from '@testing-library/react';
import App from './App';


jest.mock("./components/Foo");

test('renders learn react link', () => {

 
  render(<App />);
  const linkElement = screen.getByText(/Mock/i); // Check that MOCK component is called
  expect(linkElement).toBeInTheDocument();
});

查看 git 存储库以获取工作示例 https://github.com/meera/jest_mock

Answer 2

创建模拟是一个 3 步过程：

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