酶测试 - 不为子组件分配Prop值

Question

我是reactjs和酶工具的新手，为reactjs应用程序实现单元测试。每当我传递父组件中子组件的props值时，这些值似乎不会分配给子组件的必需字段。但是，当我直接对孩子做同样的工作时。以下是子组件的渲染部分

  render: function() {
var phoneInputClassnames = Classnames('phoneInput', {'focused':this.state.focused}, this.props.className);
var countryList = (
  <div style={styles.listConainer} className="card">
    <ul style={styles.countryList}>
      {
        this.props.suggestions.map(function(country, i){                    
          var handleClick = this.handleClickCountry.bind(this, country);
          return <CountryItem key={i} country={country} onMouseDown={handleClick}/>
        }, this)
      }
    </ul>
    <span style={styles.separator}></span>
    <ul style={styles.countryList}>
      {
        this.props.countryData.map(function(country, i){                    
          var handleClick = this.handleClickCountry.bind(this, country);
          return <CountryItem key={i} country={country} onMouseDown={handleClick}/>
        },this)
      }
    </ul>
  </div>
);

return (
  <div className={phoneInputClassnames} onFocus={this.parentOnFocus}>
    <div>
      <span>
        <Dropdown
          ref = "dropdown"
          label = {<button>{this.state.selectedCountry.dial_code} <i className="fa fa-caret-down" aria-hidden="true"></i></button>}
          content = {countryList}
          offsetX = {this.props.dropdownOffset || -6}
          offsetY = {44}
          onClose = {this.focusInput}
        />
      </span>
      <span>
        <input 
          type = "text"
          ref = "phoneInput"
          placeholder = "Phone"
          value = {this.props.value || ''}
          onKeyDown = {this.inputKeyDown}
          onChange = {this.numberOnChange} 
          onFocus={this.inputOnFocus} 
          onBlur={this.inputOnBlur}/>
      </span>
    </div>
  </div>
)
}

下面给出的父组件的渲染函数

  render: function() {
var input;
if (this.state.loginState === SessionStore.STATES.LOGIN) {
  input = (
    <div>
      <h1>Welcome</h1>
      <p>Login to manage your business.</p>
      <div className="tabs">
        <i onClick={this.tabSelect} data-tab="0" className={"fa fa-phone" + (this.state.tab == 0? " active": "")} aria-hidden="true"></i>
        <i onClick={this.tabSelect} data-tab="1" className={"fa fa-at" + (this.state.tab == 1? " active": "")} aria-hidden="true"></i>
      </div>
      <div className="inputs">
        {(function() {
          if (this.state.tab == 0) {
            return <PhoneNumber 
              countryData = {Countries.countryData} 
              suggestions = {Countries.popularCountryData}
              onChange = {this.phoneInputListener}
              onSubmit = {this.login}
              autofocus = {true}
              value = {this.state.clientNumber}
              selectedCountry = {this.state.clientCountry}
              validationHandler = {Countries.validatePhoneNumber}/>;
          } else {
            return <SmartInput 
              className = "email" 
              placeholder = "Email"
              value = {this.state.clientEmail}
              onChange = {this.emailInputOnChange}
              onSubmit = {this.emailInputListener}/>;
          }
        }.bind(this))()}
      </div>
      {(function() {
        if (this.state.error) {
          return <p className="errorText">{this.textError()}</p>
        }
      }.bind(this))()}
      {(function() {
        if (this.state.loading) { 
          return <button className="button disabled" type="button"><i className="fa fa-spinner fa-pulse fa-fw margin-bottom"></i></button>;
        } else {
          return <button className="button" type="button" onClick={this.login}>Continue</button>;
        }
      }.bind(this))()}
    </div>
  );
} else if (this.state.loginState === SessionStore.STATES.OTP) {
  input = (
    <div className="otp">
      {(function() {
        if (this.state.tab == 0) {
          return (
            <div>
              <h2>Check your Twnel!</h2>
              <p>
                You will shortly receive a login code sent to {util.formatPhoneNumber(this.state.clientCountry.dial_code + this.state.clientNumber)}.
                <span onClick={this.goBack}> (Not me)</span>
              </p>
            </div>
          );
        } else {
          return (
            <div>
              <h2>Check your Email!</h2>
              <p>
                You will shortly receive a login code sent to {this.state.clientEmail}.
                <span onClick={this.goBack}> (Not me)</span>
              </p>
            </div>
          );
        }
      }.bind(this))()}
      <SmartInput 
        placeholder = "Code"
        onChange = {this.otpInputOnChange}
        onSubmit = {this.otpInputListener} />
      {(function() {
        if (this.state.error) {
          return <p className="errorText">{this.textError()}</p>
        }
      }.bind(this))()}
      {(function() {
        if (this.state.loading) { 
          return <button className="button disabled" type="button"><i className="fa fa-spinner fa-pulse fa-fw margin-bottom"></i></button>;
        } else {
          return <button className="button" type="button" onClick={this.validate}>Continue</button>;
        }
      }.bind(this))()}
    </div>
  );
}

return (
  <div id="login" className="card">
    {input}
  </div>
);
},

实际上，我在这里测试登录操作。因为我对反应和酶都不熟悉，不知道我是否以正确的方式做这件事。以下是我的示例测试代码段

it('find the tab state', () => {
//  console.log(wrapper.find('button').last().simulate('click'));
 const wrapper2 = mount(<PhoneNumber value="1234567890" countryData= {Countries} suggestions={item}/>);
 const wrapper = mount(<Login className="sample2" placeholder="enter   something" value="1234567890" countryData={Countries} />);
 console.log(wrapper2.debug());
  expect(wrapper.find('.phoneInput')).to.have.length(1);

 }); 

如果有人伸出援助之手来解决这个问题，那将会很棒。