react 测试库无法检测已安装的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 时，它成功通过，正如预期的那样。 所以我安装了react router dom，

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;

但是现在测试失败了:

Cannot find module 'react-router-dom' from 'src/App.js'

测试失败消息截图

所以我的问题是：为什么react测试库无法检测到已经正确安装的react-router-dom？

到目前为止我的代码的

Github 存储库。

注意： 我已经测试过使用 MemoryRouter 而不是 BrowserRouter 来包装我的组件。还是同样的错误。

Answer 1

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

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

对此：

import { BrowserRouter } from 'react-router';

希望这有帮助..

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