测试选择元素反应 [英] testing select element react

问题描述

我想编写一个测试，检查我可以在我的react应用程序中更改选择元素的值.

Im want tot write a test that will check I can 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 please?

谢谢

推荐答案

您在这里遇到两个问题:

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

这篇关于测试选择元素反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！