我想编写一个测试来检查我何时更改 React 应用程序中选择元素的值。
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 元素。关于如何创建这种测试的任何想法?
最佳答案
你在这里有两个问题:
defaultTime
控制的受控组件属性(property)。在你的测试中永远不会改变,因为在 props 中传递的值总是相同的。 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')
})
关于reactjs - 在 React 应用程序中测试 Select 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49763360/