Jest Redux 테스트 문제

Question

난 그냥 래핑 된 구성 요소에 대한 테스트를 수행하는 방법을 알아 내려고 노력하고 있습니다. 구성 요소에 redux state prop를 올바르게 정의하려면 어떻게해야합니까?

연결과 PendingContract ●/돌아 오는> +++ 연결된 (SMART) 구성 요소를 렌더링

TypeError: Cannot read property 'find' of undefined 

원본 구성 요소 코드 :

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

테스트 코드를 다음과 같이

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

Answer 1

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