Question

我正在尝试测试此组件

/* 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方法，但是我想您必须模拟on change事件。我尝试使用浅层渲染，但无法正常工作。使用mount时，我可以执行该方法，但是state只是一个空对象，因此没有任何更新或期望。这是测试的输出。

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 |

如果我使用浅而不是挂载：

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

基本上，我想知道如何在react组件中测试方法。

测试组件状态onChange

0 个答案: