Fonksiyonlar ile uğraşmak ve tepki bileşenlerinde sahne olarak geçtiklerinde nasıl denendiklerini test etmek nasıl?

Question

Bu stackoverflow yanıtı örneğini izliyorum - Test a React Component function with Jest. Bir örnek bileşen ve test kurulumum var. Bileşen, App.js.'a yüklendiğinde düzgün çalışır. Bileşen

-

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) 

ben doAction yılında console.logs görebilirsiniz - aşağıdaki hatayı alıyorum, ancak

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(); 
    }) 
}) 

- burada

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> 
) 
} 
} 

Ve Test bulunuyor ve onAction, doAction'u dağıtmak istediğimde bile çağrılıyor. Ayrıca, onAction alamıyorum. Ben jest.fn() denedim ama aynı hataları var

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

- Bu hata alıyorum.

Bu işlevlerle dalga geçip bunları nasıl test edebilirim?

DÜZENLEME: Aşağıdaki şekilde() jest.fn kullanarak doAction alay başardı

- Ancak

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

, hala Example.props.onAction alay veremiyoruz.

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(); 
}); 

Sen ayrıca bunun ne fonksiyonunu test edebilirsiniz - belgeyi işlemek zaman testte

Answer 1

, böyle bir aldatma denir ediliyordu eğer daha sonra izleyebilirsiniz işlevini şey geçmesi gerekiyor Bu durumun -

ile çağrıldığını umarız.