Jest Redux測試問題

Question

我只是想弄清楚如何對連接包裝的組件進行測試。如何正確定義我的組件的redux狀態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

如果您嘗試使用安裝完全測試，則需要導入連接的組件：

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