我有这个简化的 render()
方法:
render() {
return (
<React.Fragment>
<Router>
<div>
<Route path='/abc' component={Test} />
<Route path='/def' render={() => (
<div>Hello</div>
)} />
</div>
</Router>
</React.Fragment>
)
}
这个 enzyme 测试:
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()
未呈现任何一个组件 Test
在 /abc
路线,或 <div>Hello</div>
在 /def
路线。
来自 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>
我如何测试该应用程序是否会实际呈现 Test
/abc
上的组件路线?
最佳答案
我已经设法通过模拟路由器找到解决方案:
import React from 'react';
const reactRouterDom = require('react-router-dom');
// Render plain div with children
reactRouterDom.BrowserRouter = ({children}) => <div>{children}</div>
module.exports = reactRouterDom;
关于reactjs - enzyme `mount` 不呈现 `Route` 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52061412/