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経由で渡された小道具をどのように処理する必要がありますか?