酵素：浅いが、内側に反応-Reduxのコンポーネントをレンダリング

Question

私はシンプルで、antdからその利用カードをコンポーネントに反応している：

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

export class TBD extends Component { 

    constructor() { 
    super(); 
    } 

    render() { 
    return (
     <Card title={this.props.pathname}> 
     TODO 
     </Card> 
    ); 
    } 
} 

export let select = (state) => { 
    return state.route; 
}; 

export default connect(select)(TBD); 

今、私はいくつかの簡単なテストを書き、チェックしたい、私のTBDコンポーネントの使用カード

こと

import React from 'react'; 
import {mount, shallow} from 'enzyme'; 
import {Provider, connect} from 'react-redux'; 
import {createMockStore} from 'redux-test-utils'; 
import {expect} from 'chai'; 
import chai from 'chai'; 
import chaiEnzyme from 'chai-enzyme'; 
chai.use(chaiEnzyme()); 
import { Card } from 'antd'; 
import TBDConnected, {TBD, select} from '../src/js/components/TBD'; 

describe('Fully Connected:', function() { 
    it('show selected item text', function() { 

     const expectedState = {route: {pathname: 'Menu1'}}; 
     const store = createMockStore(expectedState); 
     const ConnectedComponent = connect(select)(TBDConnected); 
     const component = shallow(<ConnectedComponent store={store} />).shallow().shallow(); 
     console.log(component.debug()); 
     expect(component.equals(<Card/>)).is.equal(true); 
    }); 
    }); 

そして3浅い私に

<Component title="Menu1"> 
TODO 
</Component> 

を返すので、それは、失敗しかし、私は期待してい

<Card title="Menu1"> 
TODO 
</Card> 

後1より多くの私はそれではなく、コンポーネントにカードを、それをレンダリングし、私が手に私が欲しいものを引き起こすことができますどのように、なぜカードは、私は理解していないよ、レンダリングからの純粋なHTMLを取得しレンダリングします。

更新

私の質問を単純化する例。コンソールで

describe('TBD', function() { 
    it('Renders a Card', function() { 
    const component = shallow(<TBD />); 
    console.log(component.debug()); 
    expect(component.equals(<Card/>)).is.equal(true); 
    }); 
}); 

デバッグ出力：次のテストは失敗

<Component title={[undefined]}> 
TODO 
</Component> 

をしかし、私は期待：

<Card title={[undefined]}> 
TODO 
</Card> 

Answer 1

問題を主張することができます。このコンポーネントの一部は、React.Componentなどを拡張することなく、単純な匿名関数として書かれています。結果では、酵素は<Component />のようにレンダリングされ、ブラウザでは<StatelessComponent />のようになります。

Answer 2

あなたは全体の接続コンポーネントをテストする必要はありません。 プレゼンテーション用の純粋なコンポーネント（ユニットテストとして）をテストしてから、コネクタを単独でテストできます。

I.E.

import React from 'react'; 
import {shallow} from 'enzyme'; 
import {expect} from 'chai'; 
import chai from 'chai'; 
import chaiEnzyme from 'chai-enzyme'; 
chai.use(chaiEnzyme()); 
import { Card } from 'antd'; 
import {TBD} from '../src/js/components/TBD'; 

describe('TBD', function() { 
    it('Renders a Card', function() { 
    const component = shallow(<TBD />); 
    expect(component.equals(<Card/>)).is.equal(true); 
    }); 
    it('sets the right title', function() { 
    const component = shallow(<TBD pathname="example" />); 
    expect(component.prop('title')).is.equal("example"); 
    }); 
}); 

ご覧のとおり、純粋なコンポーネントは純粋な関数としてテストする必要があります。いくつかの小道具を渡し、レンダリングを期待します。あなたは、コネクタをテストするとき

その後、あなたは、AntのDelvelopeコンポーネントで...それは正しくstateToPropsとdispatchToPropsをマップすること