javascript - Ref 在浅渲染 Jest/Enzyme 期间返回 undefined

Question

我想测试组件中的输入 onchange 事件。我有这样的jsx：

    export default class Login extends Component {
  constructor(props) {
    super(props);
    autoBind(this);
  }

  handleChangeFields() {
    const email = this.email.value;
    const password = this.password.value;

    const validationResults = {
      email: isValidEmail(email),
      password: password.length >= 8,
    };

    const isValidFields = Object.values(validationResults).every(Boolean);


  }


  render() {
    
    return (
      <form onSubmit={this.validateLoginForm}>
        <input
          type="email"
          name="email"
          ref={(input) => this.email = input}
          placeholder="Email *"
          onChange={this.handleChangeFields}
        />
        <input
          type="password"
          name="password"
          ref={(input) => this.password = input}
          placeholder="Password *"
          onChange={this.handleChangeFields}
        />
       
        <input
         
          type="submit"
          value="login"
        />
      </form>
    );
  }
}

我写了这样一个测试来测试是否handleChangeFields被调用：

test('should call fields change method', () => {
      const instance = wrapper.instance();
      const spyChange = jest.spyOn(instance, 'handleChangeFields');

      const input = wrapper.find('input').at(0);

      input.simulate('change', { target: { value: '[e-mail]' } });
      expect(spyChange).toHaveBeenCalled();
    });

但我在测试调用期间出错：

TypeError: Cannot read property 'value' of undefined

但我无法弄清楚我们为什么会触发错误。我在开玩笑测试中设置了输入的值，input.simulate('change', { target: { value: '[e-mail]' } });但仍然存在错误

标签： javascriptreactjsjestjsenzyme