どのように反作用コンポーネントのコンストラクタをスパイするためにユニットテスト？

Question

私は酵素、シロンを使用しており、私の反応成分を単体テストすることを期待しています。

import React from 'react'; 
import expect from 'expect.js'; 
import { shallow } from 'enzyme'; 

import ExampleComponent from './../../../src/js/components/example-component'; 

describe('Test <ExampleComponent />', function() { 

beforeEach(function() { 
    this._sandbox = sinon.sandbox.create(); 
    this.constructorSpy = this._sandbox.spy(ExampleComponent.prototype, 'constructor'); 
}); 

afterEach(function() { 
    this._sandbox.restore(); 
    this.constructorSpy = null; 
}); 

it('Should set the state with the correct data [constructor]', function() { 
    const wrapper = shallow(<ExampleComponent />); 
    console.log(' - callCount: ', this.constructorSpy.callCount); 
    expect(this.constructorSpy.calledOnce).to.be(true); 

    expect(Immutable.is(wrapper.state('shownData'), Immutable.Map())).to.be(true); 
}); 

コンポーネントのコンストラクタに、プロップとして渡すものに応じて状態を設定するロジックがあります。ただし、このテストでは、コンストラクターの呼び出し回数が0であり呼び出されていないことがわかります。

コンポーネントコンストラクタを偵察する正しい方法は何ですか？私は間違って何をしていますか？

サンドボックスに追加したい機能が他にもあるので、私はサンドボックスを使用しています。

Answer 1

酵素シャローがテストをレンダリングするときは、コンストラクター（他のライフサイクルメソッドと一緒に）を自動的に呼び出す必要があります。テストでそれを上書きしようとすると信じられないほど複雑になる可能性があります。

コンストラクタがプロンプトに基づいて状態を設定している場合、テストで結果の状態が十分でないことを確認するのはなぜですか？ （下の私の例では、 '非常に重要な'アサーションを参照してください）

もう1つのオプション：コンポーネントのレンダリングで使用される状態のアイテムを設定している場合があります。この場合、レンダリングされたアイテム素子。

最後に、私はコンストラクタに関数呼び出しを含めて、テストで（sinonを使って）それが呼び出されたと主張して助けになると頼みます。

import React, { Component, PropTypes } from 'react' 

export default class Post extends Component { 
    static propTypes = { 
    markRead: PropTypes.func.isRequired, 
    postName: PropTypes.string.isRequired 
    } 

    constructor (props) { 
    super(props) 
    const { markRead, postName } = props 

    markRead() 
    this.state = { 
     postName: 'Very Important: ' + postName 
    } 
    } 

    render() { 
    const { postName } = this.state 

    return (
     <div className='post-info'> 
     This is my post: {postName}! 
     </div> 
    ) 
    } 
} 

例酵素試験、すべてが合格：

import React from 'react' 
import assert from 'assert' 
import { shallow } from 'enzyme' 
import { spy } from 'sinon' 

import Post from 'client/apps/spaces/components/post' 

describe('<Post />',() => { 
    const render = (props) => { 
    const withDefaults = { 
     markRead:() => {}, 
     postName: 'MyPostName', 
     ...props 
    } 
    return shallow(<Post {...withDefaults} />) 
    } 

    it('renders and sets the post name',() => { 
    const markReadSpy = spy() 
    const props = { 
     markRead: markReadSpy 
    } 
    const wrapper = render(props) 
    const postInfo = wrapper.find('.post-info') 
    const postText = postInfo.text() 

    assert.equal(wrapper.state('postName'), 'Very Important: MyPostName') 
    assert(markReadSpy.calledOnce) 
    assert.equal(postInfo.length, 1) 
    assert(postText.includes('MyPostName')) 
    }) 
}) 

注：

例は、コンポーネントに反応しますが、FYI上記のあなたの例ではsinonをインポートしていないかのように加えて、それが見えます。