如何使用Jest和Enzyme测试具有Router,Redux和两个HOC的React组件?

问题描述 投票:4回答:1

我目前无法找到解决此问题的方法。 我有一个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]} />

事情尝试但没有成功:

  1. 我已经尝试将我的组件包装在Memory Router
  2. 为组件提供redux存储
  3. 使用.dive().chilndren()来尝试查看孩子们
  4. 尝试mountrender没有成功。

仍然保持渲染<Route render={[Function: render]} />

尝试 :

<MemoryRouter>
    <Component {...props} />
</MemoryRouter>

仍然产生相同的结果。 请注意,我也尝试将我的组件导入为

import { Component } from './components/'

但它返回undefined。

非常感谢任何帮助。 谢谢! 😊🙏

javascript reactjs redux jestjs enzyme
1个回答
3
投票

我假设通过<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);
   });
})

注意我已经将AppInnerMemoryRouter包装MemoryRouter ,它允许你的模拟路由器但没有浏览器的依赖。

有关更多信息,您可以阅读react-routertesting部分;

© www.soinside.com 2019 - 2024. All rights reserved.