如何使用 Enzyme 触发模糊事件来更改输入元素的值？

Question

我想为输入表单编写测试，但无法触发 Blur 事件。我有一个包含以下输入元素的反应组件：<input  id='email'  onBlur={this.handleInputChange}  name='email'  type='text'/>我还在email状态中定义了一个设置状态的函数：  handleInputChange = (event) => {    this.setState({ email: event.target.value });  };我的测试文件中有以下内容：    const inputs = component.find('input');    expect(inputs.length).toEqual(2);                             // test case passes    inputs.at(0).simulate('blur', { target: { value: 'abc@hello' } });    expect(inputs.at(0).props().value).toEqual('abc@hello');      //test fails如果我尝试模拟更改事件，测试也会失败： inputs.at(0).simulate('change', { target: { value: 23 } });在这两种情况下，我都会收到错误：    Expected: "abc@hello"    Received: undefined看来我的代码没有触发该事件。谁能告诉我我做错了什么

Answer 1

当您的组件设置状态的电子邮件属性时。您可以检查组件的状态，例如：

expect(component.state().email).toEqual('abc@hello');

Answer 2

尝试这个方法，

成分

import React, { Component } from "react";

export class YourComponent extends Component {

  state = {email: ''};

  handleInputChange = (event) => {

    this.setState({ email: event.target.value });

  };

   

  render() {

    return (

      <input

        id='email'

        onBlur={this.handleInputChange}

        name='email'

        type='text'

        value={this.state.email}

      />

    );

  }

}

 export default YourComponent;

测试文件

    describe("Blur test", () => {

      it("input component", () => {

        const component = mount(<YourComponent />);

        let inputs = component.find('input');

        const inputValue =  'abc@hello';

        inputs.at(0).simulate('blur', { target: { value: inputValue } });

    

        inputs = component.find('input');

        console.log(inputs.debug());// you will get updated value here

        expect(inputs.props().value).toEqual(inputValue);

      });

    });

Answer 3

您在测试中引用了props().value，而输入元素没有这样的属性。所以你需要value在输入中添加 prop

<input

  id='email'

  onBlur={this.handleInputChange}

  name='email'

  type='text'

  value={this.state.email}

/>

为了测试预期的 props 值，您需要强制重新渲染组件以反映新值。在 中Enzyme，我们可以通过使用 来做到这一点wrapper.setProps({})。您可以传递所需的值wrapper.setProps({value: 'abc@hello'})或只是一个空对象，此处的目的是导致重新渲染。

const inputs = component.find('input');

expect(inputs.length).toEqual(2);  // test case passes

inputs.at(0).simulate('blur', { target: { value: 'abc@hello' } });

// setProps should be called on the shallow or root wrapper.

component.setProps({}); // cause rerender.

expect(inputs.at(0).props().value).toEqual('abc@hello');  // test should pass