在React应用程序中测试Select元素

问题描述

限时删除！！

我想编写一个测试，以检查何时更改我的react应用程序中的select元素的值.

I want to write a test that will check when I change the value of a select element in my react application.

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元素.

It seems I haven't understood how to test the select element.

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

Any ideas on how to create this kind of test?

推荐答案

您在这里遇到两个问题:

You have two problems here:

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

1. You have a controlled component controlled by the defaultTime property. Will never change in your test as the value passed in the props is always the same.
2. The prop should not be called defaultTime but value (it feels odds to me but that's how it works)

如果在组件中按如下所示更改属性名称:

If in your component you change the name of the property as follows:

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

然后至少可以测试一下，当首次显示该组件时，所选值是正确的:

Then at least you can test that, when the component is firstly displayed, the selected value is correct:

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

  expect(wrapper.find('select').props().value).toBe('10:00')
})

为了测试时间的变化，您将需要测试一个更高的级别(定义了state和onChange函数的位置).在下面的示例中查看 TimeListWrapper :

In order to test the change of the time you will need to test one level higher (where your state and onChange function is defined).Look at TimeListWrapper in the example below:

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

这篇关于在React应用程序中测试Select元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..