Проверить событие onChange в энзиме и шутить с ссылками

Carlos спросил: 07 октября 2018 в 01:51 в: reactjs

Я использую 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');
  });
})

Ошибка

> p /> Отредактировано

Проверка ссылки с помощью mount

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');
  });

0 ответов