Reactjs 用Jest对路由器进行单元测试

我拼命地试着单元测试我的HashRouter路由，但我无法了解如何进行。我设法用酶得到了一种解决方案，但技术负责人强迫我使用ReactTestingLibrary

有人能帮我指出正确的方向吗

应用程序组件

import React, { Component } from 'react';
import { HashRouter } from 'react-router-dom'
import { create } from 'jss';
import { StylesProvider, jssPreset } from '@material-ui/styles';

import './App.css';
import Routes from './Routes';

class App extends Component {

  render() {
    return (
      <HashRouter>
        <Routes />                                      
      </HashRouter>
    );
  }
}

export default App;

import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import { withRouter } from 'react-router';

import NetworksList from './pages/NetworksList';
import DealsList from './pages/DealsList';

class Routes extends Component {

  render() {
    return (
      <div>
        <Route path="/networks" component={NetworksList} />
        <Route path="/deals" component={DealsList} />
      </div>
    );
  }
}

export default withRouter(Routes);

import React from 'react';
import App from './App';
import { render } from '@testing-library/react';
import { createMemoryHistory } from 'history'
import { Router } from 'react-router-dom'

import Routes from './Routes';


beforeEach(() => {
  jest.resetAllMocks();
});


it.only('should render networks list page at #/networks', () => {

  const history = createMemoryHistory()
  history.push('networks');

  const { container, getByText } = render(
    <Router history={history}>
      <Routes />
    </Router>
  )

});

import React，{Component}来自'React'；
从“react router dom”导入{HashRouter}
从“jss”导入{create}；
从'@material ui/styles'导入{StylesProvider，jssPreset}；
导入“/App.css”；
从“./Routes”导入路由；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

路由组件

import React, { Component } from 'react';
import { HashRouter } from 'react-router-dom'
import { create } from 'jss';
import { StylesProvider, jssPreset } from '@material-ui/styles';

import './App.css';
import Routes from './Routes';

class App extends Component {

  render() {
    return (
      <HashRouter>
        <Routes />                                      
      </HashRouter>
    );
  }
}

export default App;

import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import { withRouter } from 'react-router';

import NetworksList from './pages/NetworksList';
import DealsList from './pages/DealsList';

class Routes extends Component {

  render() {
    return (
      <div>
        <Route path="/networks" component={NetworksList} />
        <Route path="/deals" component={DealsList} />
      </div>
    );
  }
}

export default withRouter(Routes);

import React from 'react';
import App from './App';
import { render } from '@testing-library/react';
import { createMemoryHistory } from 'history'
import { Router } from 'react-router-dom'

import Routes from './Routes';


beforeEach(() => {
  jest.resetAllMocks();
});


it.only('should render networks list page at #/networks', () => {

  const history = createMemoryHistory()
  history.push('networks');

  const { container, getByText } = render(
    <Router history={history}>
      <Routes />
    </Router>
  )

});

import React，{Component}来自'React'；
从'react router dom'导入{Route}；
从“react router”导入{withRouter}；
从“./pages/NetworksList”导入网络列表；
从“./pages/DealsList”导入DealsList；
类路由扩展组件{
render（）{
返回(
);
}
}
使用路由器导出默认值（路由）；

应用程序组件测试

import React, { Component } from 'react';
import { HashRouter } from 'react-router-dom'
import { create } from 'jss';
import { StylesProvider, jssPreset } from '@material-ui/styles';

import './App.css';
import Routes from './Routes';

class App extends Component {

  render() {
    return (
      <HashRouter>
        <Routes />                                      
      </HashRouter>
    );
  }
}

export default App;

import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import { withRouter } from 'react-router';

import NetworksList from './pages/NetworksList';
import DealsList from './pages/DealsList';

class Routes extends Component {

  render() {
    return (
      <div>
        <Route path="/networks" component={NetworksList} />
        <Route path="/deals" component={DealsList} />
      </div>
    );
  }
}

export default withRouter(Routes);

import React from 'react';
import App from './App';
import { render } from '@testing-library/react';
import { createMemoryHistory } from 'history'
import { Router } from 'react-router-dom'

import Routes from './Routes';


beforeEach(() => {
  jest.resetAllMocks();
});


it.only('should render networks list page at #/networks', () => {

  const history = createMemoryHistory()
  history.push('networks');

  const { container, getByText } = render(
    <Router history={history}>
      <Routes />
    </Router>
  )

});

从“React”导入React；
从“./App”导入应用程序；
从'@testing library/react'导入{render}；
从“历史”导入{createMemoryHistory}
从“react Router dom”导入{Router}
从“./Routes”导入路由；
在每个之前（（）=>{
jest.resetAllMocks（）；
});
it.only（'should render networks list page at#/networks'，（）=>{
const history=createMemoryHistory（）
历史推送（“网络”）；
const{container，getByText}=render(
)
});

想法是使用基于哈希的历史“createHashHistory”来测试基于哈希的路由器。我已经为这个哈希路由器测试库导航示例准备了一个工作示例

例如，您的App.jsx是：

import Routes from "./Routes";
import { HashRouter as Router } from "react-router-dom";

export default function App() {
  return (
    <div className="App">
      <h1>HashRouter Testing</h1>
      <Router>
        <ul className="nav justify-content-center">
          <li className="nav-item">
            <a class="nav-link active" href="#">
              CompOne
            </a>
          </li>
          <li className="nav-item">
            <a class="nav-link active" href="#/comp-two">
              CompTwo
            </a>
          </li>
        </ul>
        <Routes />
      </Router>
    </div>
  );
}

从“/Routes”导入路由；
从“react Router dom”导入{HashRouter as Router}；
导出默认函数App（）{
返回(
哈希路由器测试






);
}

而Routes.jsx是：

import { Route, Switch } from "react-router-dom";

const CompOne = () => <div>Component One</div>;
const CompTwo = () => <div>Component Two</div>;

export default function Routes(props) {
  return (
    <Switch>
      <Route exact path="/">
        <CompOne />
      </Route>
      <Route exact path="/comp-two">
        <CompTwo />
      </Route>
    </Switch>
  );
}

从“react router dom”导入{Route，Switch}；
常量组件=（）=>组件一；
常数CompTwo=（）=>分量二；
导出默认功能路由（道具）{
返回(
);
}

然后，以下是如何测试基于哈希的导航：

import React from "react";
import { render, wait, waitForElement } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import { createHashHistory } from "history";
import App from "./App";

describe("AppRouter component", () => {
  afterEach(jest.resetAllMocks);

  it("navigates correctly", async () => {
    const history = createHashHistory({ initialEntries: ["/"] });
    history.push("/comp-two");
    const { container, getByText, debug } = render(<App />);
    await waitForElement(() => getByText(/Component Two/i));
    debug();
  });
});

从“React”导入React；
从“@testing library/react”导入{render，wait，waitForElement}；
导入“@测试库/jest dom/extend expect”；
从“历史”导入{createHashHistory}；
从“/App”导入应用程序；
描述（“批准者组件”，（）=>{
每次之后（开玩笑，重置所有模拟）；
它（“正确导航”，异步（）=>{
const history=createHashHistory（{initialEntries:[“/”]}）；
历史推送（“/comp-two”）；
const{container，getByText，debug}=render（）；
等待waitForElement（（）=>getByText（/Component Two/i））；
调试（）；
});
});

---

希望有帮助

想法是使用基于哈希的历史“createHashHistory”来测试基于哈希的路由器。我已经为这个哈希路由器测试库导航示例准备了一个工作示例

例如，您的App.jsx是：

import Routes from "./Routes";
import { HashRouter as Router } from "react-router-dom";

export default function App() {
  return (
    <div className="App">
      <h1>HashRouter Testing</h1>
      <Router>
        <ul className="nav justify-content-center">
          <li className="nav-item">
            <a class="nav-link active" href="#">
              CompOne
            </a>
          </li>
          <li className="nav-item">
            <a class="nav-link active" href="#/comp-two">
              CompTwo
            </a>
          </li>
        </ul>
        <Routes />
      </Router>
    </div>
  );
}

从“/Routes”导入路由；
从“react Router dom”导入{HashRouter as Router}；
导出默认函数App（）{
返回(
哈希路由器测试






);
}

而Routes.jsx是：

import { Route, Switch } from "react-router-dom";

const CompOne = () => <div>Component One</div>;
const CompTwo = () => <div>Component Two</div>;

export default function Routes(props) {
  return (
    <Switch>
      <Route exact path="/">
        <CompOne />
      </Route>
      <Route exact path="/comp-two">
        <CompTwo />
      </Route>
    </Switch>
  );
}

从“react router dom”导入{Route，Switch}；
常量组件=（）=>组件一；
常数CompTwo=（）=>分量二；
导出默认功能路由（道具）{
返回(
);
}

然后，以下是如何测试基于哈希的导航：

import React from "react";
import { render, wait, waitForElement } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import { createHashHistory } from "history";
import App from "./App";

describe("AppRouter component", () => {
  afterEach(jest.resetAllMocks);

  it("navigates correctly", async () => {
    const history = createHashHistory({ initialEntries: ["/"] });
    history.push("/comp-two");
    const { container, getByText, debug } = render(<App />);
    await waitForElement(() => getByText(/Component Two/i));
    debug();
  });
});

从“React”导入React；
从“@testing library/react”导入{render，wait，waitForElement}；
导入“@测试库/jest dom/extend expect”；
从“历史”导入{createHashHistory}；
从“/App”导入应用程序；
描述（“批准者组件”，（）=>{
每次之后（开玩笑，重置所有模拟）；
它（“正确导航”，异步（）=>{
const history=createHashHistory（{initialEntries:[“/”]}）；
历史推送（“/comp-two”）；
const{container，getByText，debug}=render（）；
等待waitForElement（（）=>getByText（/Component Two/i））；
调试（）；
});
});

---

希望有帮助

对于在查找Jest/jsdom等效项时得到此答案的任何人，在调用

createHashHistory（）

之前，您需要在测试文件中定义

window.location.hash

，因为jsdom在默认情况下没有它，调用将失败，并出现

TypeError:无法读取未定义的属性'substr'。首先执行此操作：
Object.defineProperty（window.location，“hash”，{writeable:true，value:“#”}）
（其中
#
是您开始使用的URI片段）。对于在查找Jest/jsdom等效项时找到此答案的任何人，在调用
createHashHistory（）
之前，您需要在测试文件中定义
window.location.hash
，因为jsdom在默认情况下没有它，调用将失败，出现
TypeError:cannotreadproperty'substr'of undefined
。首先执行此操作：
Object.defineProperty（window.location，“hash”，{writeable:true，value:“#”}）
（其中
#
是您开始使用的URI片段）。