使用参考测试酶和玩笑中的 onChange 事件

Question

我正在使用ref 来获取输入框的值。我想制作一个搜索组件的测试用例，它可以模拟 onChange 事件。如果我从测试用例运行我的handleSearchChange。无法解析ref。

组件

import React,{ Component } from 'react';
import { injectProps } from 'relpers';
import PropTypes from 'prop-types';


export class Search extends Component{

  state = {
    searchValue: ''
  }

  handleSearchChange = ()=>{
    const { handleInputChange } = this.props;
    let searchValue = this.search.value;
    this.setState({
      searchValue
    });
    //handleInputChange(searchValue);
  }

  render(){
    let { searchValue } = this.state;
    let { placeHolder } = this.props;
    return (
      <form>
        <input
          id={'searchInput'}
          placeholder={placeHolder}
          ref={input => this.search = input}
          value={searchValue}
          onChange={this.handleSearchChange}
        />
      </form>
    )
  }
}


Search.propTypes = {
  placeHolder: PropTypes.string,
  handleInputChange: PropTypes.func,
};

Search.defaultProps = {
  placeHolder: "Search for order..",
  handleInputChange:()=>{}
};

测试用例

import React from 'react';
import { shallow } from 'enzyme';
import { Search } from './search';

describe('<Search /> component test cases', ()=>{
  it('check if search component render properly',()=>{
    const wrapper = shallow(<Search />);
    expect(wrapper.find('input')).toHaveLength(1);
  });

  it('checks if handleSearchChange method works correctly', () => {
    const wrapper = shallow(<Search />);
    const searchInput = wrapper.find("#searchInput");
    searchInput.value = "123456";
    searchInput.simulate('change');
    expect(wrapper.instance().state.searchValue).toEqual('123456');
  });
})

错误

已编辑

使用 mount 检查 ref

it('checks if handleSearchChange method works correctly', () => {
    const wrapper = mount(<Search />);
    const instance = wrapper.instance();

    const searchInput = wrapper.find("#searchInput");
    searchInput.value = "123456";
    searchInput.simulate('change');
    expect(wrapper.instance().state.searchValue).toEqual('123456');
  });

Answer 1

shallow 似乎不支持refs - 看来您需要使用mount

mount docs

another SO post about this

此外，在这种情况下，您根本不需要使用ref。您可以像这样使用onChange 处理程序

handleSearchChange = (e) => {
  const { handleInputChange } = this.props;
  let searchValue = e.target.value;
  this.setState({searchValue});
  // whatever else you want to do
}

你只需要在某个地方绑定this，例如在你的渲染方法中，类似的东西。

<input onChange={this.handleSearchChange.bind(this)} />