Question

这是我要测试的代码

updateUser = (e) => {
  var tempUser = this.state.user;
  switch(e.target.id){
    case "email":
      tempUser.Email = e.target.value;
      break;
    case "userName":
      tempUser.Username = e.target.value;
      break;
    default:
      break;
  }

  this.setState({
    user: tempUser,
  })

render() {
.....
  <tr key='userName' className='add-user-table-row'>
  <input id='userName' onBlur={this.updateUser} className='user-value-field' defaultValue=''/> </td>

这是我的测试：该测试目前通过了，但不影响其覆盖范围。任何原因？谢谢

it('Testing the userName onBlur', () => {
  wrapper.setState({
    user:{
      Username:'Username-Test'
    }
  });
  wrapper.find('input[id="userName"]').simulate('blur', {target: { value:'Username-Test'}});
  expect(wrapper.state('user')).toEqual('Username-Test'); //remove this line??
});

Answer 1

您可以尝试强制更新包装器

it('Testing the userName onBlur', (done) => {
  wrapper.setState({
    user: {
      Username: 'Username-Test'
    }
  });

  process.nextTick(() => {
    wrapper.update();
    wrapper.find('input[id="userName"]').simulate('blur', {
      target: {
        value: 'Username-Test'
      }
    });
    expect(wrapper.state('user')).toEqual('Username-Test');
    done();
  })
});

Answer 2

由于您的代码检查了id：

updateUser = (e) => {
  var tempUser = this.state.user;
  switch(e.target.id){
  ...
  case "userName":
    tempUser.Username = e.target.value;

您需要通过适当的id，否则case将不匹配

wrapper.find('input[id="userName"]')
  .simulate('blur', {
    target: { 
      value:'Username-Test', 
      id: 'userName'
    }
  });

OnBlur没有得到正确的称呼-开玩笑的酶

2 个答案: