Cannot get node in Jest/Enzyme testing for React-Redux component

Question

I have a simplest test file that must put mock store into the component and then on render give back an actuall node by className - bannerWrap. But unfortunally I always gets an undefined. I think this is some problem with render component after putting inside it the store...

Any suggestions? Thanks

TEST FILE:

import React from 'react'
import { shallow } from 'enzyme'
import configureStore from 'redux-mock-store'
import initialState from './mocks'
import Banners from '../Banners'

describe('<Banners />', () => {
  const mockStore = configureStore()
  const store = mockStore(initialState)
  const Component = shallow(<Banners store={store} />)

  it('should render first banner', () => {
    expect(Component).toMatchSnapshot()
    expect(Component.find('.bannerWrap').length).toBe(1) // undefined
  })
})

SNAPSHOT FILE (instead of nodes I received the props of component):

// Jest Snapshot v1

exports[`<Banners /> should render first banner 1`] = `
<Banners
  bannerID={1}
  dispatch={[Function]}
  store={
    Object {
      "clearActions": [Function],
      "dispatch": [Function],
      "getActions": [Function],
      "getState": [Function],
      "replaceReducer": [Function],
      "subscribe": [Function],
    }
  }
/>
`;

COMPONENT:

import React from 'react'
import { connect } from 'react-redux'
import { CSSTransitionGroup } from 'react-transition-group'

const Banners = ({ bannerID }) => {
  return (
    <div className="bannerWrap">
      <CSSTransitionGroup
        transitionName="fade"
        transitionEnterTimeout={ANIMATION_DURATION}
        transitionLeaveTimeout={ANIMATION_DURATION}
      >
        <Banner key={bannerID} />
      </CSSTransitionGroup>
    </div>
  )
}

const mapStateToProps = state => ({
  bannerID: state.search.lastSubID
})

export default connect(mapStateToProps, null)(Banners)

score 2 · Accepted Answer · answered Jul 24 '18 at 08:41

The problem is in the Enzyme method that you using for component render. In case of using Redux store in your component you need to wrap component in mount, instead of shallow.

Just replace your TEST FILE:

import React from 'react'
import { mount } from 'enzyme'
import configureStore from 'redux-mock-store'
import initialState from './mocks'
import Banners from '../Banners'

describe('<Banners />', () => {
  const mockStore = configureStore()
  const store = mockStore(initialState)
  const Component = mount(<Banners store={store} />)

  it('should render first banner', () => {
    expect(Component).toMatchSnapshot()
    expect(Component.find('.bannerWrap').length).toBe(1) // undefined
  })
})

If you want to read more, go to link: Enzyme: When to use shallow, render, or mount?

score 0 · Answer 2 · answered Jul 24 '18 at 07:38

0

You are using shallow so your actual Banners component will not be rendered, to fix this you could try exporting just Banner component instead of connected one. It will fix your problem.

answered Jul 24 '18 at 07:38

Amit Chauhan

6,151
2
24
37

Cannot get node in Jest/Enzyme testing for React-Redux component

2 Answers2