Jest Redux测试问题

Question

我只是想弄清楚如何对用connect包装的组件进行测试。如何正确定义组件的redux state prop？

使用connect/Redux > +++的PendingContract呈现连接的(智能)组件

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