React Testレンダラー要素のシミュレーションをシミュレートする

Question

Jest v16.0.1、react-test-renderer v15.4.0およびreact-addons-test-utils v15.4.0を使用してReactコンポーネントをテストしています。

<button 
    type="button" 
    className="btn btn-lg btn-primary btn-danger" 
    disabled={this.state.cancelButtonDisabled} 
    onClick={() => this.handleCancel()} 
    ref="cancelButton" 
>Cancel</button>); 

そして、私のテストでは、私はそうのようなコンポーネントのレンダリングだ：

const component = renderer.create(
    <MyComponent /> 
); 

const instance = component.getInstance(); 
// This works but is ugly 
component.toJSON().children[1].children[0].props.onClick(); 
// This doesn't work 
ReactTestUtils.Simulate.click(instance.refs.cancelButton); 

let tree = component.toJSON(); 
expect(tree).toMatchSnapshot(); 

このボタンをクリックをシミュレートするための推奨方法は何であるの

コンポーネントは、ボタンをレンダリングしています？コンポーネントのJSON表現をトラバースすることはできますが、より良い方法であるように思えます。

私はReactTestUtils.renderIntoDocumentを使用していたときに

をReactTestUtils.Simulate.clickへのREFを使用したコンポーネントへの参照を渡すことができる前に、私はこの質問を見てきました - How to interact with components rendered by ReactTestRenderer/Jestを私はAPIは私のように変化していると仮定コンポーネントインスタンスにはfind（）メソッドがありません。

Answer 1

多分遅すぎるかもしれませんが、findは酵素由来のAPIです。あなたが想定した酵素に言及した質問に対する答えは、コメントで述べたように使用されます。

何かこれはうまくいくはずです。

MyComponent.jsx

import React from 'react'; 

class MyComponent extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     cancelButtonDisabled: false, 
    }; 
    } 
    handleCancel() { 
    this.props.cancelAction(); 
    } 
    render() { 
    return (
     <button 
     type="button" 
     className="btn btn-lg btn-primary btn-danger" 
     disabled={this.state.cancelButtonDisabled} 
     onClick={() => this.handleCancel()} 
     ref="cancelButton" 
     > 
     Cancel 
     </button> 
    ); 
    } 
} 

export default MyComponent; 

MyComponent.test.jsx

import React from 'react'; 
import {mount} from 'enzyme'; 
import MyComponent from './MyComponent'; 

describe('Test MyComponent',() => { 
    it('should be able to click the button',() => { 
    const mockFunction = jest.fn(); 
    const element = mount(<MyComponent cancelAction={mockFunction} />); 
    element.find('button').simulate('click'); 
    expect(mockFunction).toHaveBeenCalled(); 
    }); 
}); 

酵素を含まない、それは次のようになります。

MyComponentWithoutEnzyme.test.jsx

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import ReactTestUtils from 'react-addons-test-utils'; 
import MyComponent from './MyComponent'; 

describe('Test MyComponent',() => { 
    it('should be able to click the button',() => { 
    const mockFunction = jest.fn(); 
    const element = ReactTestUtils.renderIntoDocument(
     <MyComponent cancelAction={mockFunction} />, 
    ); 
    const button = ReactDOM.findDOMNode(element); 
    ReactTestUtils.Simulate.click(button); 
    expect(mockFunction).toHaveBeenCalled(); 
    }); 
});