时间戳

首页 > 解决方案 > 从 react-router-bootstrap 使用 LinkContainer 时测试失败

javascript - 从 react-router-bootstrap 使用 LinkContainer 时测试失败

问题描述

所以我正在制作一个 ReactJS 应用程序，其中包括 reactstrap、react-router 和 react-router-bootstrap。问题是当我测试包含 LinkContainer 的组件时，会出现以下错误，导致我的单元测试失败：

console.error node_modules\prop-types\checkPropTypes.js:19 警告：上下文类型失败：上下文router在 中标记为必需LinkContainer，但其值为undefined。在 LinkContainer 中（在 Header.js:27）

有人可以帮我吗？这是代码，例如在 header.js 中：

import { LinkContainer } from "react-router-bootstrap";
import { ROUTE_POKEDEX } from "../../constants/constants";

export default class Header extends Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  render() {
    return (
      <Container fluid className="header">
        <Navbar expand="md">
          <LinkContainer to={ROUTE_POKEDEX}>
            <NavbarBrand>Pokédex</NavbarBrand>
          </LinkContainer>
          <NavbarToggler onClick={this.toggle} />
        </Navbar>
      </Container>
    );
  }
}

测试.js

import Header from "./Header";

it("renders without crashing", () => {
  const div = document.createElement("div");
  ReactDOM.render(<Header />, div);
  ReactDOM.unmountComponentAtNode(div);
});

it("has valid snapshot", () => {
  const tree = renderer.create(<Header />).toJSON();
  expect(tree).toMatchSnapshot();
});

标签： javascriptreactjsreact-routerreact-router-bootstrap

解决方案

问题是LinkContainer组件需要由 包装Router，因此单元测试中的错误（在测试中呈现单个组件时不会调用路由器）。可能的解决方案是使用<MemoryRouter>.
从文档：

从特定路线开始

支持 initialEntries 和 initialIndex 道具，因此您可以在特定位置启动应用程序（或应用程序的任何较小部分）。

请参阅：https ://reacttraining.com/react-router/core/guides/testing/starting-at-specific-routes

在操作的测试用例场景中可能的解决方案是在渲染组件（未经测试）时在单元测试中执行类似的操作：
ReactDOM.render(<MemoryRouter><Header /></MemoryRouter>, div);

推荐阅读