单元测试时无法检测已安装的react-router-dom包问题求助

我正在学习React Testing Library结合react-router-dom的使用，用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，并且在App.js里用BrowserRouter组件包裹了主内容：

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'

我尝试过在测试中用MemoryRouter替代BrowserRouter来包裹组件，但还是出现同样的错误。为什么明明已经正确安装了react-router-dom，单元测试却检测不到它呢？

备注：内容来源于stack exchange，提问作者Petrando Richard