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

Question

I am currently unable to find a solution to this problem. I have a React Component that is connected to React Router 4, Redux store and is wrapped by two HOCs. Its pretty crazy, but this is how it was coded. Here is the export to give you an idea:

export default withFetch(Component)(fetchData, mapStateToProps)

I am trying to run some basic tests on it:

  it('should render self and subcomponents', () => {
    const wrapper = shallow(<Component {...props} />)
    expect(toJson(wrapper)).toMatchSnapshot()
  })

Which outputs a console.log/snapshot of:

<Route render={[Function: render]} />

Things tried but no succeed:

1. I've tried wrapping my component in the Memory Router
2. Supply a redux store to the component
3. Used .dive() and .chilndren() to try and see the children
4. Tried mount and render with no success.

Still keeps rendering the <Route render={[Function: render]} />

Trying out :

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

Still produces the same result. Note that I've also tried importing my component as

import { Component } from './components/'

But it returns undefined.

Any help is deeply appreciated. Thank you! 😊🙏

Answer 1

I assume that by <Router> you are referring to BrowserRouter. The best way is to isolate the wrapped component and test it with testing alternatives.

For example assume that you want to test that:

// App.jsx

export const App = () => 
<Router>
  <ReduxProvider>
     <AppInner>
  </ReduxProvider>
</Router>

My suggestion is to test AppInner with testing env of Router & ReduxProvider.

In tests:

// 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);
   });
})

Pay attention that I've wrapped the AppInner with MemoryRouter , it allows your mimic router but without the dependency of the browser.

For more info you can read the testing section of react-router ;