Question

https://reacttraining.com/react-router/web/guides/testing

react-router测试文档对我来说有些晦涩。

如何编写测试以检查路线是否呈现

一个组件。 - APage.js

import React, { Component } from 'react'


export default class APage extends Component {
  render() {
    return (
      <div>
        A Page
      </div>
    )
  }
}

根据文档编写单元测试以进行检查。

routes.test.js

import React from 'react'
import { render } from "react-dom";
import APage from './APage'
import {MemoryRouter} from 'react-router-dom';

  test("render route", () => {
    render(
      <MemoryRouter initialEntries={["/apage"]}>
        <APage />
      </MemoryRouter>
    );
  });

出现错误，不变违规：目标容器不是DOM元素。用于渲染。

如何编写基本测试，例如测试组件是否在路线上渲染。

Answer 1

好的。路线测试必须通过酶来完成。不只是开玩笑。

关注https://medium.com/@antonybudianto/react-router-testing-with-jest-and-enzyme-17294fefd303

使用酶标仪进行测试。

Answer 2

我认为您应该改用路由器。由于那使用了BrowserRouter。（请参阅react router example page的替代部分）

import { Router } from 'react-router-dom';

test("render route", () => {
  const history = createMemoryHistory();
  history.push('/apage');
  render(
    <Router history={history}>
      <APage />
    </Router>
  );
});

可能您还应该将页面添加到Route中，但我不确定。

然后将是这样：

import { Router, Route } from 'react-router-dom';

test("render route", () => {
  const history = createMemoryHistory();
  history.push('/apage');
  render(
    <Router history={history}>
      <Route path='/aroute' render={(props) => (<APage {...props} />)} />
    </Router>
  );
});

MemoryRouter和笑话测试

2 个答案: