在反应应用程序中测试选择元素

Question

我想编写一个测试，该测试将检查何时更改反应应用程序中选择元素的值。

import React, { Component } from 'react';
const TimeList =(props) =>{

return(
    <div>
    <label>
      Time
      <br/>
      <select name="lessonTime" value={props.defaultTime} onChange={props.handleChange}>
        <option value="8:00">8:00</option>
        <option value="8:30">8:30</option>
        <option value="9:00">9:00</option>
        <option value="10:00">10:00</option>
        <option value="12:00">12:00</option>
        <option value="13:30">13:30</option>
        <option value="19:00">19:00</option>
        <option value="19:30">19:30</option>
      </select>
    </label>
    </div>
  );
};
export default TimeList;

我的测试代码：

it('should select correct time',() =>{
    const mockFunc = jest.fn();
    const wrapper = mount(<TimeList value='10:00'
    onChange={mockFunc}/>)
    console.log(wrapper.props());
    wrapper.find('select').simulate('change',{target:{value:'8:00'}});
    expect(wrapper.find('select').props().value).toBe('8:00');
  });

我得到的错误是：

 Expected value to be (using ===):
      "8:00"
    Received:
      undefined
    
    Difference:
    
      Comparing two different types of values. Expected string but received undefined.

似乎我不明白如何测试选择元素。

关于如何创建这种测试的任何想法？

Answer 1

你在这里有两个问题：

1. 您有一个由 defaultTime 属性控制的受控组件。在您的测试中永远不会改变，因为在道具中传递的值总是相同的。
2. 道具不应该被称为defaultTime而是value(这对我来说感觉很奇怪，但这就是它的工作原理(

如果在组件中更改属性的名称，如下所示：

export const TimeList =(props) =>{
  return(
    <div>
      <label>
        Time
        <br/>
        <select name="lessonTime" value={props.value} onChange={props.handleChange}>
          <option value="8:00">8:00</option>
          <option value="8:30">8:30</option>
          <option value="9:00">9:00</option>
          <option value="10:00">10:00</option>
          <option value="12:00">12:00</option>
          <option value="13:30">13:30</option>
          <option value="19:00">19:00</option>
          <option value="19:30">19:30</option>
        </select>
      </label>
    </div>
  )
}

然后，至少您可以测试，当组件首次显示时，所选值是否正确：

it('should select correct time',() =>{
  const wrapper = mount(<TimeList value='10:00' onChange={jest.fn()}/>)
  expect(wrapper.find('select').props().value).toBe('10:00')
})

为了测试时间的变化，您需要测试更高的一个级别(定义状态和onChange函数的位置(。查看以下示例中的TimeListWrapper：

export const TimeList =(props) =>{
  return(
    <div>
      <label>
        Time
        <br/>
        <select name="lessonTime" value={props.value} onChange={props.handleChange}>
          <option value="8:00">8:00</option>
          <option value="8:30">8:30</option>
          <option value="9:00">9:00</option>
          <option value="10:00">10:00</option>
          <option value="12:00">12:00</option>
          <option value="13:30">13:30</option>
          <option value="19:00">19:00</option>
          <option value="19:30">19:30</option>
        </select>
      </label>
    </div>
  )
}
export class TimeListWrapper extends React.Component {
  constructor (props, context) {
    super(props, context)
    this.state = {
      timeListValue: '8:00'
    }
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(event) {
    this.setState({
      timeListValue: event.target.value
    })
  }
  render() {
    return (
      <div>
        <TimeList value={this.state.timeListValue} handleChange={this.handleChange} />
      </div>
    )
  }
}

这是对TimeListWrapper的测试：

it('should select correct time on change',() =>{
  // When component is mounted
  const wrapper = mount(<TimeListWrapper/>)
  // Then its default value is 8:00
  expect(wrapper.find('select').props().value).toBe('8:00')
  // When 10:00 is selected
  wrapper.find('select').simulate('change', {target: {value: '10:00'}})
  // Then its value changes to 10:00
  expect(wrapper.find('select').props().value).toBe('10:00')
})