我有一个 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
分配了一个空模拟,它不使用预期的手动模拟。我做错了什么?
最佳答案
我看到你的文件结构不正确。 __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
关于reactjs - Jest 手动模拟在 CRA 中不使用模拟文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65108082/