Question

我想写一个测试，检查我可以改变反应应用程序中select元素的值。

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.

似乎我还没有理解如何测试select元素。

有关如何创建此类测试的任何想法吗？

由于

Answer 1

您在这里有两个问题：

您有一个受defaultTime属性控制的受控组件。道具中传递的值始终相同，因此测试永远不会改变。
该道具不应称为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')
})

测试选择元素反应

1 个答案: