运行单元测试时无法检测到已安装的react-router-dom包

Question

我想用react-router-dom学习react测试库。我使用

npx create-react-app

命令创建了该应用程序。生成的代码在父文件夹中已经有一个 App.test.js：

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

当我运行

npm test

时，它按预期成功通过。 我使用

npm i react-router-dom

安装了 React-Router-DOM，并使用

BrowserRouter

组件包装了主 App.js。

import { BrowserRouter } from 'react-router-dom'
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="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>
    </BrowserRouter>
  );
}

export default App;

但是现在测试失败，出现以下错误：

无法从“src/App.js”中找到模块“react-router-dom”

测试失败消息截图

为什么单元测试无法检测到已经正确安装的

react-router-dom

？

到目前为止我的代码的

Github 存储库。

注意： 我已经测试过使用

MemoryRouter

而不是

BrowserRouter

来包装我的组件，但仍然是同样的错误。

Answer 1

一切看起来都很好，只需在 App.js 中更新 BrowseRouter 导入：

import { BrowserRouter } from 'react-router-dom'

对此：

import { BrowserRouter } from 'react-router';

-> 请确保您已安装这 3 个软件包：

• react-dom
• 反应路由器
• 反应路由器-dom

希望这有帮助..

参考：https://www.npmjs.com/package/react-router-dom