酵素浅いレンダリングコンポーネントのノードを1つだけレンダリング

Question

虚偽のレンダリングは、モックされたストアでreduxコンポーネントをレンダリングしているときに予期しない動作をします。

私はこのようになります簡単なテストがあります。

このうち期待印刷物として

class Test extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return(
     <div className="here"/> 
    ) 
    } 
} 
export default Test; 

：ただし

<div className="here" /> 

テストコンポーネントがどのように見える

import React from 'react'; 
    import { shallow } from 'enzyme'; 
    import { createMockStore } from 'redux-test-utils'; 

    import Test from './Test' 

    it('should render ',() => { 
    const testState = { 
     app: { 
     bar: ['a', 'b', 'c'] 
     } 
    }; 

    const store = createMockStore(testState) 
    const context = { 
     store, 
    }; 
    const shallowComponent = shallow(<Test items={[]}/>, {context}); 

    console.log(shallowComponent.debug()); 

    } 

を私のコンポーネントはreduxコンポーネントです：

class Test extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return(
     <div className="here"/> 
    ) 
    } 
} 
const mapStateToProps = state => { 
    return { 
    barData: state.app.bar 
    } 
} 

export default connect(
    mapStateToProps 
)(Test) 

は、その後私は、コンソールで取得することはこれです：

<BarSeriesListTest items={{...}} barData={{...}} dispatch={[Function]} /> 

はなぜこの違いはありますか？私のコンポーネントは、私のコンポーネントのreduxバージョンで<div className="here"/>が埋め込まれていることをテストするには？

Answer 1

connectが返すHOCを参照していますが、テストするコンポーネントではありません。

子コンポーネントをレンダリングしてラッパーとして返す酵素のdive関数を使用する必要があります。あなたがに取得してダイビングする必要があり、複数のコンポーネントを持っている場合は、それを複数回使用することができます

const shallowComponent = shallow(<Test items={[]}/>, {context}).dive();

。まだ孤立してテストしているので、mountを使用するよりも良いです。

Answer 2

あなたが接続されていないコンポーネントをエクスポートして（最初exportに気づく）別にそれをテストする必要があります

export class Test extends React.Component { 

} 
... 
export default connect(
    mapStateToProps 
)(Test) 

テストであなたがそうのように接続されていないコンポーネントのレンダリングをテストする必要がありますが（{ Test }周りの中括弧に気付きます）：

import React from 'react'; 
import { shallow } from 'enzyme'; 
import toJson from 'enzyme-to-json'; 
import { Test } from './Test'; 

describe('...',() => { 
    it('...',() => { 
    const wrapper = shallow(<Test />) 
    expect(toJson(wrapper)).toMatchSnapshot(); 
    }) 
}) 

これが役に立ちます。

モードを具体的にご説明した場合のコンポーネントは次のようになります。

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

export class Test extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return(
     <div className="here"/> 
    ) 
    } 
} 
const mapStateToProps = state => { 
    return { 
    barData: state.app.bar 
    } 
} 

export default connect(
    mapStateToProps 
)(Test) 

テストの仕様は次のようになります。

次のスナップショットを生成

import React from 'react'; 
import { shallow } from 'enzyme'; 
import toJson from 'enzyme-to-json'; 
import { Test } from 'Test'; 

describe('Test component',() => { 
    it('renders',() => { 
    const wrapper = shallow(<Test />); 
    expect(toJson(wrapper)).toMatchSnapshot(); 
    }); 
}); 

：あなたがいる

exports[`Test component renders 1`] = ` 
<div 
    className="here" 
/> 
`; 

Answer 3

を既定では接続されたコンポーネントをエクスポートします。あなたが行うことができるのは、接続されていないコンポーネントをreduxにインポートすることです。

import { Test } from './Test'; 

あなたのテストはうまくいくはずです。