Javascript 从react路由器引导使用LinkContainer时测试失败
因此,我正在制作一个ReactJS应用程序,其中包括reactstrap、react路由器和react路由器引导。问题是,当我测试包含LinkContainer的组件时,会发生以下错误,使我的单元测试失败: console.error节点\u modules\prop types\checkPropTypes.js:19 警告:失败的上下文类型:上下文Javascript 从react路由器引导使用LinkContainer时测试失败,javascript,reactjs,react-router,react-router-bootstrap,Javascript,Reactjs,React Router,React Router Bootstrap,因此,我正在制作一个ReactJS应用程序,其中包括reactstrap、react路由器和react路由器引导。问题是,当我测试包含LinkContainer的组件时,会发生以下错误,使我的单元测试失败: console.error节点\u modules\prop types\checkPropTypes.js:19 警告:失败的上下文类型:上下文路由器在链接容器中标记为必需,但其值为未定义。 在LinkContainer中(在Header.js:27处) 谁能帮我一下吗?这是代码,例如在h
路由器
在链接容器
中标记为必需,但其值为未定义
。
在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>
);
}
}
从“react router bootstrap”导入{LinkContainer};
从“./../constants/constants”导入{ROUTE_POKEDEX}”;
导出默认类头扩展组件{
建造师(道具){
超级(道具);
this.toggle=this.toggle.bind(this);
此.state={
伊索彭:错
};
}
切换(){
这是我的国家({
isOpen:!this.state.isOpen
});
}
render(){
返回(
神奇宝贝
);
}
}
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();
});
从“/Header”导入标题;
它(“渲染而不崩溃”,()=>{
const div=document.createElement(“div”);
ReactDOM.render(,div);
ReactDOM.unmountComponentAtNode(div);
});
它(“具有有效的快照”,()=>{
const tree=renderer.create().toJSON();
expect(tree.toMatchSnapshot();
});
问题在于链接容器
组件需要由路由器
包装,因此单元测试中出现错误(在测试中呈现单个组件时不会调用路由器)。可能的解决方案是使用
从文档中: 从特定路线出发 支持initialEntries和initialIndex道具,因此 您可以在特定时间启动应用程序(或应用程序的任何较小部分) 地点 见: op的测试用例场景中可能的解决方案是在呈现组件(未测试)时在单元测试中执行类似的操作:
ReactDOM.render(,div);