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

Question

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

console.error node_modules\prop-types\checkPropTypes.js:19 Warning: Failed context type: The context router is marked as required in LinkContainer, but its value is undefined. in LinkContainer (at 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();
});

Answer 1

问题是 LinkContainer组件需要被 Router 包裹，因此在您的单元测试中出现错误(当在您的测试中呈现单个组件时，不会调用路由器)。可能的解决方案是使用 <MemoryRouter> .
来自文档:

Starting at specific routes

supports the initialEntries and initialIndex props, so you can boot up an app (or any smaller part of an app) at a specific location.

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

在 op 的测试用例场景中，可能的解决方案是在呈现组件(未测试)时在单元测试中执行类似的操作:
ReactDOM.render(<MemoryRouter><Header /></MemoryRouter>, div);