проверить событие 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');
  });
})

Ошибка

1024 * Отредактированный *

Проверка ссылки с креплением

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

смонтировать документы

еще один SO пост об этом

Кроме того, вам действительно не нужно вообще использовать 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)} />