React Input组件单元测试：获取input值始终为undefined求助

我来帮你搞定这个测试问题～你遇到的value总是undefined的核心原因是：Enzyme返回的wrapper对象不是原生DOM元素，直接访问.value属性是行不通的，得用Enzyme提供的方法来获取正确的值。

问题分析 #

你现在直接写wrapper.find('input').value，但wrapper.find('input')返回的是Enzyme的ReactWrapper实例，不是浏览器里的原生<input>元素，所以这个属性根本不存在，自然返回undefined。

解决方案 #

根据你的Input组件是受控组件还是非受控组件，有两种正确的取值方式：

1. 如果是受控组件（通过value props控制值）

直接通过.props().value获取组件的props值：

// 获取值
console.log(wrapper.find('input').props().value);
// 断言
expect(wrapper.find('input').props().value).to.be.equal("myName");

2. 如果是非受控组件（通过defaultValue设置初始值）

需要先获取原生DOM元素，再访问value：

// 获取值
console.log(wrapper.find('input').getDOMNode().value);
// 或者用.instance()
console.log(wrapper.find('input').instance().value);
// 断言
expect(wrapper.find('input').getDOMNode().value).to.be.equal("myName");

修正后的完整代码 #

这里我帮你把代码里的小语法问题（比如缺分号）也一并修正了，你可以参考：

import React from 'react';
import chai, { expect } from 'chai';
import { mount } from 'enzyme';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });
import Input from './Input';

describe('Input Component', () => {
  let wrapper;

  beforeEach(() => {
    const props = {
      placeholder: "name",
      name: "name",
      value: "myName",
      change: () => {},
      classes: "input"
    };
    // 受控组件方式（推荐，大多数React表单组件都是受控的）
    wrapper = mount(<Input {...props} />);
    // 如果是非受控组件，换成下面这行
    // wrapper = mount(<Input defaultValue="myName" {...props} />);

    // 正确打印值
    console.log(wrapper.find('input').props().value); // 受控组件用这个
    // console.log(wrapper.find('input').getDOMNode().value); // 非受控组件用这个
  });

  it('Input value should be myName', () => {
    // 受控组件断言
    expect(wrapper.find('input').props().value).to.be.equal("myName");
    // 非受控组件断言
    // expect(wrapper.find('input').getDOMNode().value).to.be.equal("myName");
  });
});

另外还要确认你的Input组件确实正确传递了value或defaultValue到内部的原生<input>元素哦，如果组件内部没有把props传递下去，那上面的方法也拿不到值～

内容的提问来源于stack exchange，提问作者Naresh Manthena