2017-12-19 39 views
0

私はReact/Jest/Enzymeを学ぼうとしています。Jest/React/Redux - MapDispatchToProps Undefined

私は2つの小道具を受け取るコンポーネントを持っている -

loadTenantListAction, 
filterTenantListAction, 

これらの小道具はmapDispatchToProps経由で渡される -

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

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を宣言しました

私のユニットテストでは、これらの小道具が必須とマークされているが、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経由で渡された小道具をどのように処理する必要がありますか?

答えて

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