Shallow rendering enzyme only one node in redux components

Question

Enzymatic minor rendering behaves in an unpredictable way if I present a redux component with a laughed repository.

I have a simple test that looks like this:

import React from 'react'; import { shallow } from 'enzyme'; import { createMockStore } from 'redux-test-utils'; import Test from './Test' it('should render ', () => { const testState = { app: { bar: ['a', 'b', 'c'] } }; const store = createMockStore(testState) const context = { store, }; const shallowComponent = shallow(<Test items={[]}/>, {context}); console.log(shallowComponent.debug()); } 

The Test component looks like this:

 class Test extends React.Component { constructor(props) { super(props); } render() { return( <div className="here"/> ) } } export default Test; 

What was expected to print this out:

  <div className="here" /> 

However, if my component is a redux component:

 class Test extends React.Component { constructor(props) { super(props); } render() { return( <div className="here"/> ) } } const mapStateToProps = state => { return { barData: state.app.bar } } export default connect( mapStateToProps )(Test) 

Then I get the following in the console:

 <BarSeriesListTest items={{...}} barData={{...}} dispatch={[Function]} /> 

Why is this a difference? How to check that my component has <div className="here"/> built into it in my version for hex version?

Answer 1

You are referring to a HOC that returns connect , not the component that you want to test.

You should use the dive enzyme function, which will display the child component and return it as a wrapper.

const shallowComponent = shallow(<Test items={[]}/>, {context}).dive();

You can use it several times if you have several components that you need to go through to get to them. This is better than using mount , because we are still testing in isolation.

Answer 2

You must export the unbound component and test it separately (note the first export ):

 export class Test extends React.Component { } ... export default connect( mapStateToProps )(Test) 

During the test, you should test the rendering of an unconnected component (see curly braces around { Test } ):

 import React from 'react'; import { shallow } from 'enzyme'; import toJson from 'enzyme-to-json'; import { Test } from './Test'; describe('...', () => { it('...', () => { const wrapper = shallow(<Test />) expect(toJson(wrapper)).toMatchSnapshot(); }) }) 

Hope this helps.

The mode specifically for your described case of the component should be:

 import React from 'react'; import { connect } from 'react-redux'; export class Test extends React.Component { constructor(props) { super(props); } render() { return( <div className="here"/> ) } } const mapStateToProps = state => { return { barData: state.app.bar } } export default connect( mapStateToProps )(Test) 

The test specification should be:

 import React from 'react'; import { shallow } from 'enzyme'; import toJson from 'enzyme-to-json'; import { Test } from 'Test'; describe('Test component', () => { it('renders', () => { const wrapper = shallow(<Test />); expect(toJson(wrapper)).toMatchSnapshot(); }); }); 

What generates the following snapshot:

 exports[`Test component renders 1`] = ` <div className="here" /> `; 

Answer 3

You export the connected component by default. What you can do is import a component that is not related to shrinking.

 import { Test } from './Test'; 

Then your test should work.