反応コンポーネントの小道具として渡されたとき、関数を模擬して呼び出されることをテストするにはどうすればいいですか？

Question

私はこのstackoverflow答えの例に従っています - Test a React Component function with Jest。私はサンプルコンポーネントとテストをセットアップしています。 App.jsにロードすると、コンポーネントが正しく動作します。

コンポーネント -

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

export default class ExampleModule extends Component { 
    static propTypes = { 
    onAction: PropTypes.func, 
    } 

    static defaultProps = { 
    onAction:() => { console.log("In onAction"); } 
} 

doAction =() => { 
    // do something else 
    console.log('In do action'); 
    this.props.onAction(); 
} 

render() { 
    return(
    <div> 
     <button className='action-btn' onClick= {this.doAction.bind(this)}>Do action</button> 
    </div> 
) 
} 
} 

そして、ここではテストです -

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import TestUtils from 'react-addons-test-utils'; 
import ExampleComponent from './ExampleModule.js'; 

let Example; 

describe('Example component', function() { 
    beforeEach(function() { 
    Example = TestUtils.renderIntoDocument(<ExampleComponent />); 
    }) 

    it('calls props functions', function() { 
    Example.doAction = jest.genMockFunction(); 
    let actionBtn = TestUtils.findRenderedDOMComponentWithClass(Example, 'action-btn'); 
    TestUtils.Simulate.click(actionBtn); 
    expect(Example.doAction).toBeCalled(); 
    }) 

    it('doAction calls onAction', function() { 
    expect(Example.props.onAction).not.toBeCalled(); 
    Example.doAction(); 
    expect(Example.props.onAction).toBeCalled(); 
    }) 
}) 

しかし、私は次のエラーを取得する -

FAIL src/App/components/Example/ExampleModule.test.js 
    Console 

    console.log src/App/components/Example/ExampleModule.js:14 
     In do action 
    console.log src/App/components/Example/ExampleModule.js:24 
     In onAction 

    Example component › calls props functions 

    Expected the mock function to be called. 

     at Object.<anonymous> (src/App/components/Example/ExampleModule.test.js:17:30) 
     at process._tickCallback (node.js:369:9) 

    Example component › doAction calls onAction 

    toBeCalled matcher can only be used on a spy or mock function. 

     at Object.<anonymous> (src/App/components/Example/ExampleModule.test.js:21:40) 
     at process._tickCallback (node.js:369:9) 

私はdoActionでconsole.logsを見ることができます私がdoActionを模倣したいときでもonActionが呼び出されています。 また、onActionをモックできません。私はこのエラーを取得する -

TypeError: Cannot assign to read only property 'onAction' of #<Object> 

私はjest.fn()を試してみましたが、同じエラーを持っています。

これらの機能を模擬してテストするにはどうすればよいですか？

EDIT：

私は次のようにjest.fn（）を使用してdoActionを模擬することができました -

let mockFn = jest.fn(); 
Example.doAction = mockFn() 

をしかし、私はまだExample.props.onActionを模擬することができませんでしだ。あなたは、さらにどのようなことで機能をテストすることができ

let onActionMock = jest.fn(); 

beforeAll(function() { 
    Example = TestUtils.renderIntoDocument(<ExampleComponent onAction={onActionMock}/>); 
}); 

beforeEach(function() { 
    onActionMock.mockClear(); 
}); 

it('doAction calls onAction',() => { 
    Example.doAction(); 
    expect(onActionMock).toBeCalled(); 
}); 

- あなたのテストで

Answer 1

ドキュメントをレンダリングするとき、あなたはそれが呼び出された場合は、後で見ることができますモック関数を渡す必要があり、このような何かは -

expect(onActionMock).toBeCalledWith('Some argument'); 

と呼ばれています。