Тестирование состояния компонента React onChange

Я пытаюсь протестировать этот компонент

/* eslint-disable jsx-a11y/no-onchange */
import React, { Component } from 'react'
import { } from 'prop-types'
import { withStyles } from '@material-ui/core/styles'

export class RangeFilter extends Component {
  static propTypes = {}
  static defaultProps = {}

  state = {
    id: this.props.id,
    value: null,
    option: '',
    valid: true,
  }

  onSelectChange = (event) => {
    const selectValue = event.target.value
    this.setState({ option: selectValue }, () => this.props.rangeFilter({
      id: this.props.id,
      value: this.state.value,
      option: this.state.option,
    }))
  }

  onFilterChange = (event) => {
    const filterValue = event.target.value
    if (filterValue < 0) {
      this.setState({ valid: false, value: filterValue })
    } else {
      this.setState({ valid: true, value: filterValue },
        () => this.props.rangeFilter({
          id: this.props.id,
          value: this.state.value,
          option: this.state.option,
        }))
    }
  }

  setStyle = () => {
    if (this.state.valid) {
      return {
        width: '70%',
      }
    } else {
      return {
        width: '70%',
        border: '2px solid #e89b9b',
      }
    }
  }

  render () {
    const { classes } = this.props
    return (
      <div className = {classes.filter}>
        <input
          style = {this.setStyle()}
          type = "number"
          min = "0"
          onChange = {this.onFilterChange}
        />

        <select
          onChange = {this.onSelectChange}
          value = {this.state.option}
          className = {classes.select}
          disabled = {!this.state.value}
        >
          <option value = "">=</option>
          <option value = "<">&lt;</option>
          <option value = ">">&gt;</option>
        </select>
      </div>
    )
  }
}

const styles = {
  select: {
    marginLeft: 5,
  },
  filter: {
    width: '100%',
  },
}

export default withStyles(styles)(RangeFilter)

с этим тестом

import React from 'react'
import { shallow, mount } from 'enzyme'

import RangeFilter from '../RangeFilter'

describe('<RangeFilter /> component', () => {
  it('renders', () => {
    const rangeFilter = shallow(
      <RangeFilter />
    )
    expect(rangeFilter).toHaveLength(1)
  })

  it('should set option to <', () => {
    const rangeFilter = mount(<RangeFilter rangeFilter = {() => {}} />)
    rangeFilter.find('select').simulate('change', { target: { value: '<' } })
    expect(rangeFilter.state.option).toBe('<')
  })
})

но я не могу заставить его работать. Я новичок в тестировании реакции и не могу найти четкой документации или руководств по тестированию чего-либо более сложного, чем нажатие кнопки. Все, что я действительно хочу протестировать, это метод onSelectChange, но я думаю, вам нужно смоделировать событие при изменении. Я попытался использовать неглубокий рендеринг, но не смог заставить его работать. При использовании mount я могу заставить метод выполнить, но состояние - это просто пустой объект, поэтому нечего обновлять или делать какие-либо ожидания. Это результат теста.

expect(received).toBe(expected) // Object.is equality

    Expected value to be:
      "<"
    Received:
      undefined

    Difference:

      Comparing two different types of values. Expected string but received undefined.

      15 |     const rangeFilter = mount(<RangeFilter rangeFilter = {() => {}} />)
      16 |     rangeFilter.find('select').simulate('change', { target: { value: '<' } })
    > 17 |     expect(rangeFilter.state.option).toBe('<')
      18 |   })
      19 | })
      20 |

Если я использую shallow вместо mount:

Method “simulate” is only meant to be run on a single node. 0 found instead.

      20 |   it('should set option to <', () => {
      21 |     const rangeFilter = shallow(<RangeFilter rangeFilter = {() => {}} />)
    > 22 |     rangeFilter.find('select').simulate('change', { target: { value: '<' } })
      23 |     expect(rangeFilter.state.option).toBe('<')
      24 |   })
      25 | })

По сути, я хочу знать, как протестировать метод в компоненте реакции.