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

Question

我有一个 CRA 应用程序，正在尝试使用 manual mocks 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被 mock (它的计算量很大并在单元测试中进行了测试)。所以在我的测试中我添加了 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__目录应立即在组件下

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