如何使用 Jest __mocks__ 在 monorepo 中模拟 react-router-dom答案

【问题标题】：How to use Jest __mocks__ to mock react-router-dom in a monorepo如何使用 Jest __mocks__ 在 monorepo 中模拟 react-router-dom
【发布时间】：2021-01-12 12:42:13
【问题描述】：

我无法模拟 react-router-dom，我看到一个错误，因为模拟没有被实例化。我哪里错了？：

我有一个这样的 monorepo，应用程序是使用 CRA 创建的，并在根目录下使用 craco：

|── node_modules
└── applications
        |── myFirstApp
        |      └── src
        |           └── components
        |                    └── MyComponent.js
        |                    └── MyComponent.spec.js
        |── mySecondApp
        |      └── src
        |           └── components
        |                    └── MyComponent.js
        |                    └── MyComponent.spec.js
        └── myThirdApp
               └── src
                    └── components
                             └── MyComponent.js
                             └── MyComponent.spec.js

// applications/myFirstApp/src/components/MyComponent.js

import React from "react";
import { withRouter } from "react-router-dom";

class NavigationProviderBase extends Component {
  render() {
    return (
      *foo*
    );
  }
}

export default withRouter(NavigationProviderBase);

如果我模拟 spec 文件中的依赖关系，一切都会按预期工作：

// applications/myFirstApp/src/components/MyComponent.spec.js

import { render } from "@testing-library/react";
import React from "react";
import MyComponent from "./MyComponent";

jest.mock("react-router-dom", () => ({
  withRouter: (component) => component,
}));

describe("MyComponent", () => {
  it("should do stuff", () => {
    render(<MyComponent />);
  });
});

但是，我不想在多个 spec 文件中重复导入，所以我正在查看 Jest 的手动模拟功能：https://jestjs.io/docs/en/manual-mocks

我已将文件夹结构更改为：

|── node_modules
|── __mocks__ 
|       └── react-router-dom.js
└── applications
        |── myFirstApp
        |      └── src
        |           └── components
        |                    └── MyComponent.js
        |                    └── MyComponent.spec.js
        |── mySecondApp
        |      └── src
        |           └── components
        |                    └── MyComponent.js
        |                    └── MyComponent.spec.js
        └── myThirdApp
               └── src
                    └── components
                             └── MyComponent.js
                             └── MyComponent.spec.js

模拟文件包含：

// __mocks__/react-router-dom.js

const reactRouterDom = jest.createMockFromModule("react-router-dom");

reactRouterDom.withRouter = ({ children }) => children;

module.exports = reactRouterDom;

spec 文件现在像：

// applications/myFirstApp/src/components/MyComponent.spec.js

import { render } from "@testing-library/react";
import React from "react";
import MyComponent from "./MyComponent";

describe("MyComponent", () => {
  it("should do stuff", () => {
    render(<MyComponent />);
  });
});

但是，现在运行测试时，我收到了错误：

Invariant failed: You should not use <withRouter(MyComponent) /> outside a <Router>

这向我表明 react-router-dom 不再被嘲笑。

【问题讨论】：

标签： javascript reactjs jestjs

【解决方案1】：

您可以使用MemoryRouter 组件作为测试组件的包装器，而不是模拟。

【讨论】：

【解决方案2】：

我已经解决了。问题是 __mocks__ 不在项目范围内 jest.config.js roots

roots: ["<rootDir>", "<rootDir>/../../__mocks__"]

【讨论】：