Jest Redux test issue

Question

I am just trying to figure out how to do tests on components that are wrapped with connect. How do I properly define the redux state prop to my component?

● PendingContract with connect/Redux › +++ render the connected(SMART) component

TypeError: Cannot read property 'find' of undefined

Original Component code:

// Dependencies
import React, { Component } from 'react';
import CSSModules from 'react-css-modules';
import { connect } from 'react-redux';
import * as actions from '../../../../actions';
import PendingContractDetail from './pending-contract-

detail/PendingContractDetail';

// CSS
import styles from './PendingContract.css';

export class PendingContract extends Component {

  componentWillMount() {
    this.props.getSinglePendingContract(this.props.params.contract);
  }

  render() {
    let contract;
    if (this.props.contract) {
      const contractDetails = this.props.contract;
      contract = (
        <PendingContractDetail 
         accepted={contractDetails.accepted}
         contractId={contractDetails.contractId}
         contractName={contractDetails.contractName}
         details={contractDetails.details} 
         status={contractDetails.status}
         timeCreated={contractDetails.timeCreated}
         type={contractDetails.type} />
      );
    } else {
      contract = 'Loading...'
    };

    return (
      <div className='row'>
        <div className='col-xs-12 col-sm-12 col-md-12'>
          {contract}
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    contract: state.pendingContracts.contract
  }
}

const PendingContractWithCSS = CSSModules(PendingContract, styles);

export default connect(mapStateToProps, actions)(PendingContractWithCSS);

Test Code as follows:

import React from 'react';
import reduxThunk from 'redux-thunk';
import { Provider } from 'react-redux';
import { shallow, mount } from 'enzyme';
import PendingContract from './PendingContract';

import configureStore from 'redux-mock-store';

jest.mock('react-css-modules', () => Component => Component);

describe('PendingContract with connect/Redux', () => {
  const initialState = { 
    contract: {
      accepted: true,
      contractId: 1234,
      contractName: 'Test Contract',
      details: { test: 'test'},
      status: 'Accepted',
      type: 'Sports'
    }
  };

  const mockStore = configureStore([reduxThunk])
  let store,wrapper;

  beforeEach(()=>{
    store = mockStore(initialState)
    wrapper = mount(<Provider store={store}><PendingContract {...initialState} /></Provider>)  
  })

  it('+++ render the connected(SMART) component', () => {
    expect(wrapper.find(PendingContract).length).toEqual(1)
  });

  // it('+++ check Prop matches with initialState', () => {
  //   expect(wrapper.find(PendingContract).prop('contract')).toEqual(initialState.contract)
  // });
});

Shota Shota · Accepted Answer · 2017-04-25T21:54:46

You need to import connected component if you are trying to fully test it with mount:

import React from 'react';
import reduxThunk from 'redux-thunk';
import { Provider } from 'react-redux';
import { shallow, mount } from 'enzyme';
import ConnectedPendingContract, { PendingContract } from './PendingContract';
import configureStore from 'redux-mock-store';

jest.mock('react-css-modules', () => Component => Component);

describe('PendingContract with connect/Redux', () => {
  const initialState = { 
    contract: {
      accepted: true,
      contractId: 1234,
      contractName: 'Test Contract',
      details: { test: 'test'},
      status: 'Accepted',
      type: 'Sports'
    }
  };

  const mockStore = configureStore([reduxThunk])
  let store,wrapper;

  beforeEach(()=>{
    store = mockStore(initialState)
    wrapper = mount(<Provider store={store}><ConnectedPendingContract {...initialState} /></Provider>)  
  })

  it('+++ render the connected(SMART) component', () => {
    expect(wrapper.find(PendingContract).length).toEqual(1)
  });

  // it('+++ check Prop matches with initialState', () => {
  //   expect(wrapper.find(PendingContract).prop('contract')).toEqual(initialState.contract)
  // });
});

Jest Redux test issue

1 Answers