在主机应用程序中模拟联合模块以开玩笑

Question

事实上，这里的问题完全相同，但有不同的上下文：\n How to mock notinstalled npm package in jest?

\n

我参与了一个项目，其中使用了 webpack 中的新模块联合。基本上，我有一个主机应用程序，它使用远程应用程序。我在这里对路由做同样的事情：\n https://github.com/module-federation/module-federation-examples/tree/master/shared-routes2

\n

我的主机应用程序导入远程应用程序的路由类似\n（我从 module-federation 存储库中获取此示例：https://github.com/module-federation/module-federation-examples/blob/master/shared-routes2 /app1/src/App.js）

\n

// app1/src/App.js\n\nimport React from "react";\nimport { BrowserRouter, Route, Switch } from "react-router-dom";\n\n\nimport localRoutes from "./routes";\nimport remoteRoutes from "app2/routes";\n\nconst routes = [...localRoutes, ...remoteRoutes];\n\nconst App = () => (\n  <BrowserRouter>\n    <div data-test-id="App-navigation">\n      <h1>App 1</h1>\n      <React.Suspense fallback={<div>Loading...</div>}>\n        <Switch>\n          {routes.map((route) => (\n            <Route\n              key={route.path}\n              path={route.path}\n              component={route.component}\n              exact={route.exact}\n            />\n          ))}\n        </Switch>\n      </React.Suspense>\n    </div>\n  </BrowserRouter>\n);\n\n

\n

我的这个组件的测试文件如下所示：

\n

// app1/src/App.test.js\n\nimport React from \'react\';\nimport { MemoryRouter } from \'react-router-dom\';\nimport { render } from \'@testing-library/react\';\n\nimport App from \'./App\';\n\njest.mock(\'app2/routes\');\n\ndescribe(\'App\', () => {\n  test(\'should render navigation\', async () => {\n    const { findByTestId } = render(\n      <MemoryRouter>\n        <App />\n      </MemoryRouter>,\n    );\n    const app = await findByTestId(\'App-navigation\');\n\n    expect(drawerMenu).toBeInTheDocument();\n  });\n});\n

\n

该测试产生的错误如下：

\n

\xe2\x9d\xaf yarn test App.test.js\nyarn run v1.22.10\n$ jest App.test.js\n FAIL  src/App.test.js\n  \xe2\x97\x8f Test suite failed to run\n\n    Cannot find module \'app2/routes\' from \'src/App.test.js\'\n\n       6 | import App from \'./App\';\n       7 |\n    >  8 | jest.mock(\'app2/routes\');\n         |      ^\n       9 |\n\n      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:306:11)\n      at Object.<anonymous> (src/App.test.js:8:6)\n\nTest Suites: 1 failed, 1 total\nTests:       0 total\nSnapshots:   0 total\nTime:        3.78 s\nRan all test suites matching /App.test.js/i.\nerror Command failed with exit code 1.\ninfo Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.\n

\n

我相信发生此错误是因为实际上没有名为 的模块app2/routes。它是由 webpack 模块联合插件生成的联合模块。然而，jest在模拟之前先查找实际的模块。

\n

这是我陷入困境并且没有想法的部分。

\n

Answer 1

Jest 提供虚拟模拟，它解决了这个问题。（我从这个答案中找到了解决方案：/sf/answers/3923684481/）

jest.mock('app2/routes', 
  () => { 
    // some mocking for my remote app routes
  },
  { virtual: true }
);

创建模拟工厂后，您只需传递{ virtual: true }选项即可停止抱怨模块的存在。

_{此答案是由 OP Halil Kayer根据 CC BY-SA 4.0 发布的，作为对问题Mocking federated Modules in host application for jest的编辑。}