使用 create-react-app 将 react-router-dom 添加到 react 应用程序时，为啥玩笑测试会中断

Posted 2023-02-22

【中文标题】使用 create-react-app 将 react-router-dom 添加到 react 应用程序时，为啥玩笑测试会中断

【英文标题】：Why does jest testing break when adding react-router-dom to a react app with create-react-app使用 create-react-app 将 react-router-dom 添加到 react 应用程序时，为什么玩笑测试会中断

【发布时间】：2019-10-23 09:00:01

【问题描述】：

我正在运行一个带有 react-16.8.6 的 create-react-app，除了添加 react-router 之外没有任何修改。现在测试不起作用。

回滚之后，我发现只要我导入“react-router-dom”库的任何部分，基本测试就会失败。有什么想法吗？

下面是我注释掉该行时的 App.js 和 App.test.js：

import  Switch  from "react-router-dom";

测试运行没有问题。当我将该行返回到代码时，我收到以下错误：

测试套件无法运行

在“react-router-dom.js”中找不到模块“react”

但是，Jest 能够找到：

'./App.css'
'./App.js'
'./App.test.js'

App.js

import React from "react";
import  Switch  from "react-router-dom";
import logo from "./logo.svg";
import "./App.css";

function App() 
  return (
    <div className="App">
      <header className="App-header">
        <img src=logo className="App-logo"  />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );


export default App;

app.test.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

it("renders without crashing", () => 
  const div = document.createElement("div");
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
);

【问题讨论】：

我可以看到您正在导入 Switch，但没有在任何地方使用它，虽然这不重要，但我建议您如果要导入它，不妨使用它。跨度>

有些奇怪。 jest 成功地将react-router-dom 导入到您的测试中，但是当react-router-dom.js 本身尝试从'react' 导入时，它只是找不到模块。也许您的jest 配置（检查您的package.json 中的jest 分支）可能会带来更多详细信息。

@DorShinar 在我的完整应用程序中，我正在使用 Switch - 上面的代码只是显示了我通过从应用程序中删除所有内容的步骤，以找出导致错误的原因以及我发现的是即使只是导入开关也会导致问题。

【参考方案1】：

这可能是一些包管理器安装问题。尝试进行全新安装：

rm -rf ./node_modules && rm yarn.lock && yarn

或者如果您使用的是 npm：

rm -rf ./node_modules && rm package-json.lock && npm install

顺便说一句，您正在安装的react-router-dom 的版本是什么？刚刚在新建的create-react-app项目上试了一下，安装了最新版的router，但是无法重现这个错误（）

【讨论】：

感谢您的帮助。我尝试按照您的建议删除 node_modules 和 package-json.lock 并重新安装，但问题仍然存在。我的反应路由器 dom 版本是 "react-router-dom": "^5.0.1"

@Finglish 只是为了确定——你试过yarn吗？但不要认为这是真正的原因，我也尝试过 npm 它，结果相同 - 没有失败......奇怪

@Skyrocket 。我将您的答案标记为正确，因为问题最终出在节点模块上。尽管清除和重新安装没有帮助。最终解决它的方法是使用 depcheck 包检查缺少的依赖项并安装它们。不知道为什么缺少的依赖项没有在主应用程序中引发错误，但现在一切正常。再次感谢！

【参考方案2】：

遇到了同样的问题，我想我可以为遇到同样问题的人详细说明解决方案。

删除node_modules和yarn.lock/package-lock.json无法解决。相反，正如@Finglish 在他们上面的评论中提到的那样，您可能缺少依赖项。

修复缺失的部门：

获取depcheck 包。 在您的项目文件夹中运行它以查看您缺少哪些依赖项。 安装缺少的依赖项。 再次运行测试以确保一切正常。