Reactjs 酶-如何设置内部成分的状态？

我需要访问内部组件的状态，使其在click事件中处于活动状态，我的问题是使用

mount

时酶不允许这样做，这只能通过如上所述的酶的

shallow

渲染来实现，同样如前所述，我尝试使用获取表单组件，然后再次从表单获取我需要访问的按钮组件，问题是，由于表单组件长度为零，我的测试用例一直失败

酶：3.1.0

酶-适配器-反应-15: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);
});

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

test（'它应该模拟提交操作'，（）=>{
让contactUs=浅（）；
sinon.spy（ContactUs.prototype，'submitMessage'）；//验证此方法调用
let form=contactUs.find（表单）
expect（form.length）.toBe（1）；//在这里失败
let button=form.dive（）.find（按钮）；
期望（按钮长度）.toBe（1）；
setState（{disabled:false}）；//需要实现这一点
expect（按钮）.toBeDefined（）；
期望（按钮长度）.toBe（1）；
expect（button.props（）.label）.toBe（'SEND MESSAGE'）；
按钮。查找（'a'）。获取（0）。模拟（'click'）；
expect（ContactUs.prototype.submitMessage）.toHaveProperty（'callCount'，
1);
});

contactus.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);
});

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

import React，{Component，PropTypes}来自'React'；
从“./Form”导入表单；
从“../../network”导入{sendSubscriptionMessage}；
从“../Fields/Button”导入按钮；
导出默认类ContactUs扩展组件{
建造师（道具）{
超级（道具）；
此.state={
contactData:{}
}
}
onChangeHandler（事件）{
让值=event.target.value；
this.state.contactData[event.target.name]=值；
}
submitMessage（事件）{
event.preventDefault（）；
sendSubscriptionMessage（this.state.contactData）；
}
render（）{
返回(
联系！
);
}
}

首先，我认为您不应该在此处测试按钮和表单功能。在此文件中，您应该只测试

ContactForm

组件

对于第一次失败，这应该有效：

find（'Form'）

（

Form

应该有引号）

按钮也一样：

find（'Button'）；

这样，您甚至不必在测试文件中导入

表单

和

按钮

组件

然后，您不必为该按钮设置任何状态。您可以在

button.test.js

文件中测试按钮功能。 您在这里需要做的就是像这样调用它的方法：

button.nodes[0].props.onClick（）；

总的来说，您的测试应该是这样的（注意，我没有测试它，我一直在使用Jest测试我的组件，但逻辑应该是相同的）：

test（'它应该模拟提交操作'，（）=>{
常量包装器=浅（）；
const spy=sinon.spy（ContactUs.prototype，'submitMessage'）；//将间谍保存到新变量中
const form=wrapper.find（'form'）//我不知道是否是相同的，但简单地说，它足以将组件名称作为字符串传递，因此您不必再将其导入测试文件中。
期望（形式）.to.have.length（1）；
const button=wrapper.find（'button'）；//从代码中可以看出，按钮是ContactUs组件的一部分，而不是表单的一部分。
期望（按钮）.to.have.length（1）；
/*这些行不应是此测试文件的一部分。请仅为按钮组件创建测试文件。
setState（{disabled:false}）；
expect（按钮）.toBeDefined（）；
期望（按钮长度）.toBe（1）；
expect（button.props（）.label）.toBe（'SEND MESSAGE'）；
*/
button.nodes[0].props.onClick（）；//这里直接调用它的方法，因为我们不关心它的内部功能；我们想检查是否调用了“submitMessage”方法。
assert（spy.called）；//这里我不是很确定……我是一个开玩笑的粉丝，我会这样做：“expect（spy.tohavebeencall（）；”
});

为了最大化获得帮助的机会，我建议将代码减少到问题的核心，并提供测试代码。感谢您的回答，通过做一些调整，我的测试结果确实很好。