如何从使用路由器的组件外部监视历史对象？

Question

对于其他组件的单元测试，我使用 spyOn 和 history 模块：

 import { render, screen } from "@testing-library/react";
 import { createMemoryHistory } from "history";
 import { Router } from "react-router-dom";
 import Home from "./pages/Home";

 test("home", () => {
  const history = createMemoryHistory();
  const pushSpy = jest.spyOn(history, "push");

  render(
   <Router history={history}>
    <Home />
   </Router>
   );

  userEvent.click(screen.getByRole("button"));

  expect(pushSpy).toHaveBeenCalled();
 }

我有以下组件，我想在其中测试对history.push() 的调用：

function App() {
 return (
  <Router>
   <Switch>
    <Route path="/">
     <Home /> //this component uses history.push internally but it is not wrapped in a router
    </Route>
   </Switch>
  </Router>
 )
}

当我无法用我的自定义<Router history={history}> 包装App 组件时，我如何spyOn history 对象？

Answer 1

我通过将自定义 history 对象放在我在测试文件和组件文件中导入的文件中来使其工作：

//testutils.js

import { createMemoryHistory } from "history";

const history = createMemoryHistory();

export default history;

我在App 中导入自定义history 对象：

//App.jsx

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import history from "./testutils";

function App() {
 return (
  <Router history={history}>
   <Switch>
    <Route path="/">
     <Home /> //this component uses history.push internally but it is not wrapped in a router
    </Route>
   </Switch>
  </Router>
 )
}

我还在我的测试文件中导入了自定义的history 对象，这样我就可以spyOn 相同的对象：

import history from "./utils/history";
import { render } from "@testing-library/react";
import App from "./outsidehistory";

test("Spy on history from utils file", () => {
  const pushSpy = jest.spyOn(history, "push");
  render(<App />);
  expect(pushSpy).toHaveBeenCalledWith("/success");
});