Question

所以我正在制作一个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>
    );
  }
}

test.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包装，因此单元测试中会出错（在测试中呈现单个组件时，不会调用Router）。可能的解决方案是使用<MemoryRouter>。
从文档中：

从特定路线开始

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

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

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

从react-router-bootstrap

1 个答案: