我目前无法找到解决此问题的方法。 我有一个React组件连接到React Router 4,Redux存储并由两个HOC包装。 它非常疯狂,但这是它的编码方式。 这是出口给你一个想法:
export default withFetch(Component)(fetchData, mapStateToProps)
我正在尝试对它进行一些基本测试:
it('should render self and subcomponents', () => {
const wrapper = shallow(<Component {...props} />)
expect(toJson(wrapper)).toMatchSnapshot()
})
其中输出一个console.log / snapshot:
<Route render={[Function: render]} />
事情尝试但没有成功:
Memory Router
.dive()
和.chilndren()
来尝试查看孩子们 mount
和render
没有成功。 仍然保持渲染<Route render={[Function: render]} />
尝试 :
<MemoryRouter>
<Component {...props} />
</MemoryRouter>
仍然产生相同的结果。 请注意,我也尝试将我的组件导入为
import { Component } from './components/'
但它返回undefined。
非常感谢任何帮助。 谢谢! 😊🙏
我假设通过<Router>
你指的是BrowserRouter。 最好的方法是隔离包裹的组件并使用测试替代方案对其进行测试。
例如,假设您要测试:
// App.jsx
export const App = () =>
<Router>
<ReduxProvider>
<AppInner>
</ReduxProvider>
</Router>
我的建议是使用Router&ReduxProvider的测试AppInner
测试AppInner。
在测试中:
// AppInner.test.jsx
import {mount} from 'enzyme';
import {MemoryRouter} from 'react-router';
describe('AppInner', () => {
it('should do something', () => {
const TestingComponent = () =>
<MemoryRouter>
<ReduxProvider>
<AppInner />
<ReduxProvider>
<MemoryRouter>;
const component = mount(TestingComponent);
});
})
注意我已经将AppInner
与MemoryRouter
包装MemoryRouter
,它允许你的模拟路由器但没有浏览器的依赖。
有关更多信息,您可以阅读react-router
的testing
部分;