[英]Enzyme `mount` not rendering `Route` elements
我有这个简化的render()
方法:
render() {
return (
<React.Fragment>
<Router>
<div>
<Route path='/abc' component={Test} />
<Route path='/def' render={() => (
<div>Hello</div>
)} />
</div>
</Router>
</React.Fragment>
)
}
和这个酶测试:
test('Render <Test> on /abc', () => {
const wrapper = mount(
<MemoryRouter initialEntries={['/abc']} >
<App />
</MemoryRouter>
);
console.log(wrapper.debug());
expect(wrapper.find(Test)).to.have.lengthOf(1);
});
但是, mount()
不会在/abc
路由上呈现组件Test
,也不会在/def
路由上呈现<div>Hello</div>
。
console.log(wrapper.debug());
输出console.log(wrapper.debug());
:
<MemoryRouter initialEntries={{...}}>
<Router history={{...}}>
<App>
<BrowserRouter>
<Router history={{...}}>
<div>
<Route path="/abc" component={[Function: Test]} />
<Route path="/def" render={[Function: render]} />
</div>
</Router>
</BrowserRouter>
</App>
</Router>
</MemoryRouter>
如何测试该应用程序实际上将在/abc
路由上呈现Test
组件?
我设法找到了一个模拟路由器的解决方案:
import React from 'react';
const reactRouterDom = require('react-router-dom');
// Render plain div with children
reactRouterDom.BrowserRouter = ({children}) => <div>{children}</div>
module.exports = reactRouterDom;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.