Jest/Enzyme - 反応性Reduxコンテナにセットされていない小道具

Question

私はJest/Enzyme and Reactが新です。コンテナコンポーネントをテストしようとしています。

私のテストでは、initialStateと一致する小道具をチェックします。

これは、これは現在、すべてのテストがshould match props with initial state除いて、渡している私のテスト

import React from 'react'; 
import { shallow, mount, configure } from 'enzyme'; 
import renderer from 'react-test-renderer'; 
import Adapter from 'enzyme-adapter-react-16'; 

import configureStore from 'redux-mock-store'; 
import { Provider } from 'react-redux'; 
import { createStore } from 'redux'; 

import App from '../../App'; 
import ConnectedHome, { Home } from './'; 

configure({ adapter: new Adapter() }); 

describe('HOME',() => { 
    it('should render the DUMB component',() => { 
    const { wrapper } = setup(defaultProps); 
    expect(wrapper.length).toEqual(1); 
    }); 

    it('should display the initial loading message',() => { 
    const { wrapper } = setup(defaultProps); 
    expect(wrapper.contains('Loading...')).toEqual(true); 
    }); 
}); 

describe('CONNECTED HOME',() => { 
    it('should render the SMART component',() => { 
    const { container } = setup(defaultProps, initialState); 
    expect(container.length).toEqual(1); 
    }); 

    it('should match props with initial state',() => { 
    const { container } = setup(defaultProps, initialState); 
    expect(container.prop('home')).toEqual(initialState); 
    }); 
}); 

const initialState = { 
    content: [], 
    loading: true, 
    error: null 
}; 

const defaultProps = { 
    home: { 
    content: [], 
    loading: true, 
    error: null 
    }, 
    dispatch:() => {} 
}; 

function setup(props = {}, state = {}) { 
    const mockStore = configureStore(); 
    const store = mockStore(state); 

    const wrapper = shallow(<Home {...props} />); 
    const container = shallow(<ConnectedHome store={store} />); 

    return { wrapper, container }; 
} 

ある

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 

import { loadHomeAction } from '../../actions/home'; 

export class Home extends Component { 
    componentDidMount() { 
    this.props.dispatch(loadHomeAction()); 
    } 

    render() { 
    const { content, loading } = this.props.home; 
    return (
     <div> 
     <div>{loading && <p>Loading...</p>}</div> 
     <div>{!loading && content.map(item => <p key={item.message}>{item.message}</p>)}</div> 
     </div> 
    ); 
    } 
} 

const mapStateToProps = ({ home }) => ({ home }); 

export default connect(mapStateToProps)(Home); 

私のコンポーネントである - このテスト戻ります：

CONNECTED HOME › should match props with initial state 

    expect(received).toEqual(expected) 

    Expected value to equal: 
     {"content": [], "error": null, "loading": true} 
    Received: 
     undefined 

    Difference: 

     Comparing two different types of values. Expected object but received undefined. 

ログアウトでコンテナは家が未定義であることがわかります。

どうやってこれがうまくいかないのか混乱しています。

私はこれらの接続のコンポーネントのテストを理解しようとする試みで、このブログの記事に沿って、次のされています - https://medium.com/netscape/testing-a-react-redux-app-using-jest-and-enzyme-b349324803a9

EDIT

[OK]を、ので、私は私のテストにいくつかの変更を加え、私のセットアップ機能は今に見えます

function setup(props = {}, state = {}) { 
    const mockStore = configureStore(); 
    const store = mockStore(state); 

    const wrapper = shallow(<Home {...props} />); 
    const container = shallow(
    <Provider store={store}> 
     <ConnectedHome /> 
    </Provider> 
); 

    return { wrapper, container }; 
} 

と私のテスト

のように見えるように

10は、今、私は私のテストは、現在有効な<ConnectedHome {...props} />を追加することで、コンソール

TypeError: Cannot destructure property `content` of 'undefined' or 'null'. 

EDIT＃2 からこれを取得します。しかし、本質的に1 = 1と言われているように感じます。

Answer 1

私の意見では、クラスをエクスポートしてテスト可能にするべきではありません。私は似たような質問への回答として、より洗練されたソリューションを投稿しました。こちらをご覧ください：How to Unit Test React-Redux Connected Components?

をまた、あなたの質問に答えるために、私の勧告は次のとおりです。

1. 使用snapshot testing renderメソッドをテストします。
2. componentDidMountメソッドを個別にテストします。

componentDidをマウントする方法は？ここに行く：

it('componentDidMount should dispatch loadHomeAction',() => { 
 
    const wrapper = shallow(<Home dispatch={jest.fn()} />); 
 
    wrapper.instance().componentDidMount(); 
 
    expect(wrapper.instance().props.dispatch).toBeCalledWith(loadHomeAction()); 
 
});