Jest/React/Redux - MapDispatchToProps 정의되지 않음

Question

나는 React w/Jest/Enzyme을 배우려고합니다.

나는이 2 개 소품받는 구성 요소 - 같은 내 구성 요소에

import { withRouter } from 'react-router-dom'; 
import { connect } from 'react-redux'; 

import { 
    loadTenantListAction, 
    filterTenantListAction, 
} from '../../store/actions'; 

import TenantList from './TenantList'; 

const mapStateToProps = tenants => ({ tenants }); 
const mapDispatchToProps = { 
    loadTenantListAction, 
    filterTenantListAction, 
}; 

export default withRouter(
    connect(mapStateToProps, mapDispatchToProps)(TenantList) 
); 

내가 선언 한 propTypes - -

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 

export default class TenantList extends Component { 
    static propTypes = { 
    loadTenantListAction: PropTypes.func.isRequired, 
    filterTenantListAction: PropTypes.func.isRequired, 
    }; 
    render() { 
    return <p>Foo</p>; 
    } 
} 

loadTenantListAction, 
filterTenantListAction, 

이 소품은 mapDispatchToProps을 통해 전달됩니다

내 단위 테스트가 실패했습니다. 이제이 소품이 필수로 표시되지만 unde입니다. 벌금.

import React from 'react'; 
import { shallow } from 'enzyme'; 

import TenantListContainer from '../../../src/containers/TenantList'; 
import TenantList from '../../../src/containers/TenantList/TenantList'; 

describe('<TenantList />',() => { 
    it('should render the TenantList Component',() => { 
    const wrapper = shallow(<TenantListContainer />); 
    expect(wrapper.find(<TenantList />)).toBeTruthy(); 
    }); 
}); 

내가

expect(
     wrapper.find(
     <TenantList 
      loadTenantListAction={() => {}} 
      filterTenantListAction={() => {}} 
     /> 
    ) 
    ).toBeTruthy(); 

같은 일을하고 시험을 통과 할 수 있습니다하지만 잘 전혀 보이지 않으며, 내가 기대합니까 - 나는 내 테스트로 전달하고 있지 않다,이 기대 그런 일을 계속함으로써 유용한 시험을 쓸 수 있어야합니다.

mapDispatchToProps를 통해 전달 된 소품을 어떻게 처리해야합니까?

Answer 1

간단한 방법으로 구성 요소에 소품을 직접 전달할 수 있습니다.

describe('<TenantList />',() => { 
    const props = { 
    loadTenantListAction:() => {}, // or you can use any spy if you want to check if it's called or not 
    filterTenantListAction() => {}, 
    } 
    it('should render the TenantList Component',() => { 
    const wrapper = shallow(<TenantListContainer {...props} />); 
    expect(wrapper.find(<TenantList />)).toBeTruthy(); 
    }); 
});