酵素 - 内部成分の状態を設定するには？

Question

私はそれをクリックイベントのためにアクティブにするために、内部コンポーネントの状態にアクセスする必要があります。私の問題はを使用するとこれを許可しません。shallowhere私はdiveを使用してFormコンポーネントをフェッチし、Formから再び到達する必要のあるButtonコンポーネントを取得しようとしましたが、Formコンポーネントの長さがゼロのため、テストケースが失敗し続けるという問題があります。

酵素：3.1.0

酵素アダプタ反応-15：私はEnzymeにかなり新しいです1.0.1"

、すべてのヘルプは、おかげ

を理解されるであろう

contactus.test.js：

test('It should simulate submit action ',()=>{ 
    let contactUs = shallow(<ContactUs />); 
    sinon.spy(ContactUs.prototype, 'submitMessage');// Verify this method call 
    let form = contactUs.find(Form) 
    expect(form.length).toBe(1);//Failing over here 
    let button = form.dive().find(Button); 
    expect(button.length).toBe(1); 
    button.setState({disabled : false});//Need to achieve this 
    expect(button).toBeDefined(); 
    expect(button.length).toBe(1); 
    expect(button.props().label).toBe('SEND MESSAGE'); 

    button.find('a').get(0).simulate('click'); 
    expect(ContactUs.prototype.submitMessage).toHaveProperty('callCount', 
1); 
}); 

contactus.js：

import React, {Component,PropTypes} from 'react'; 
import Form from './form'; 
import {sendSubscriptionMessage} from '../../network'; 
import Button from '../Fields/Button'; 

export default class ContactUs extends Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     contactData: {} 
    } 
} 

onChangeHandler(event) { 
    let value = event.target.value; 
    this.state.contactData[event.target.name] = value; 
} 

submitMessage(event) { 
    event.preventDefault(); 
    sendSubscriptionMessage(this.state.contactData); 
} 

render() { 
    return (<div className = "row pattern-black contact logo-container" id = "contact"> 
     <div className = "container" > 
     <h2 className = "sectionTitle f-damion c-white mTop100" > 
     Get in Touch! 

     <Form onChangeHandler = { 
      this.onChangeHandler.bind(this) 
     } > 
     <Button onClick = { 
      this.submitMessage.bind(this) 
     } 
     className = "gradientButton pink inverse mTop50" 
     label = "SEND MESSAGE"/> 
     </Form> </div> 
     </div> 
    ); 
    } 
} 

Answer 1

私はあなたがここにボタンとフォームの機能をテストするべきではないと思いますまず第一に。このファイルでは、ContactFormコンポーネントのみをテストする必要があります。最初の失敗のために

、これは動作するはずです：

find('Form')（Formは引用符が必要です）ボタンの

同じ： find('Button');

このように、あなたもする必要はありませんテストファイルにFormとButtonのコンポーネントをインポートします。

次に、そのボタンの状態を設定する必要はありません。 Button.test.jsファイルのボタン機能をテストします。これはあなたのテストは私をテストするために冗談を使用してきた、私はそれをテストしていないことに注意してください（ように見えるべきかで、 button.nodes[0].props.onClick();

全体： あなたがここにしなければならないすべては、このようにそのメソッドを呼び出すことですコンポーネントは同じですが、ロジックは同じである必要があります）。

test('It should simulate submit action ',()=>{ 
    const wrapper = shallow(<ContactUs />); 
    const spy = sinon.spy(ContactUs.prototype, 'submitMessage'); // Save the spy into a new variable 

    const form = wrapper.find('Form') // I don't know if is the same, but in jest is enough to pass the component name as a string, so you don't have to import it in your test file anymore. 

    expect(form).to.have.length(1); 

    const button = wrapper.find('Button'); // from what I see in your code, the Button is part of the ContactUs component, not of the Form. 

    expect(button).to.have.length(1); 

    /* These lines should not be part of this test file. Create a test file only for the Button component. 
    button.setState({disabled : false}); 
    expect(button).toBeDefined(); 
    expect(button.length).toBe(1); 
    expect(button.props().label).toBe('SEND MESSAGE'); 
    */ 

    button.nodes[0].props.onClick(); // Here you call its method directly, cause we don't care about its internal functionality; we want to check if the "submitMessage" method has been called. 


    assert(spy.called); // Here I'm not very sure... I'm a Jest fan and i would have done it like this "expect(spy).toHaveBeenCalled();" 
});