![](/img/trans.png)
[英]Testing onChange using Enzyme, Sinon and Chai- onChange is not called?
[英]Enzyme is not testing onChange method
我正在尝试通过将模拟数据传递给 App.test.js 的 on change 方法来进行测试,但是我收到以下错误。
● 应该处理 onChange 事件 › 应该处理 onChange 事件
expect(received).toEqual(expected) Expected value to equal: "Owl" Received: undefined Difference: Comparing two different types of values. Expected string but received undefined.
我查看了一个类似的帖子
onChange - 使用 Jest 酶进行测试 - 检查? ,但是他们不是一个可以帮助的答案
应用程序.js
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import Card from './Card';
import PropTypes from "prop-types";
const Styles = {
marginTop: '100px',
inputStyle: {
borderRadius: '0px',
border: 'none',
borderBottom: '2px solid #000',
outline: 'none',
focus: 'none'
}
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
query: '',
title: undefined,
url: undefined
}
this.onChange = this.onChange.bind(this);
}
onChange(e) {
this.setState({query: e.target.value})
}
getGIY = async(e) => {
e.preventDefault();
const { query } = this.state;
await fetch(`http://api.giphy.com/v1/gifs/search?q=${query}&api_key=iBXhsCDYcnktw8n3WSJvIUQCXRqVv8AP&limit=5`)
.then(response => response.json())
.then(({ data }) => {
this.setState({
title: data[0].title,
url: data[0].images.downsized.url
});
})
.catch(console.log);
}
render() {
return (
<div className="col-md-6 mx-auto" style={Styles}>
<h1 className="gif-title">Random GIF fetch</h1>
<form className="form-group" onSubmit={this.getGIY}>
<input
style={Styles.inputStyle}
className="form-control"
type="text"
name="query"
onChange={this.onChange}
placeholder="Search GIF..."/>
<button type="submit" className="btn btn-primary mt-4">Get GIF</button>
</form>
<Card title={this.state.title} url={this.state.url}/>
</div>
);
}
}
PropTypes.propTypes = {
onChange: PropTypes.func.isRequired,
getGIY:PropTypes.func.isRequired,
title:PropTypes.string.isRequired,
url:PropTypes.string.isRequired
}
export default App;
App.test.js
import React from 'react';
import ReactDOM from 'react-dom';
import {shallow} from 'enzyme';
import App from './App';
describe('Should render App Component', ()=> {
it('should render app component', ()=> {
const component = shallow(<App />);
})
})
describe('Should have h1 title', ()=> {
it('Should show Random GIF fetch', ()=>{
const component = shallow(<App/>);
expect(component.find("h1.gif-title")).toHaveLength(1);
expect(component.find("h1.gif-title").text()).toContain("Random GIF fetch")
})
})
describe('Should handle onChange event', ()=> {
it('should handle onChange event', ()=> {
const component = shallow(<App/>)
const form = component.find('input')
form.props().onChange({
target:{
title: 'Owl',
query: 'Owl',
url: 'https://media.giphy.com/media/qISaMW1xwmvNS/giphy.gif'
}
});
expect(component.state('query')).toEqual('Owl')
})
})
您的事件处理程序根据e.target.value
设置状态:
onChange(e) {
this.setState({query: e.target.value})
}
...但你没有在你的target.value
事件中为target.value
传递任何东西。
将您的测试更改为:
describe('Should handle onChange event', ()=> {
it('should handle onChange event', ()=> {
const component = shallow(<App/>)
const form = component.find('input')
form.props().onChange({
target:{
value: 'Owl'
}
});
expect(component.state('query')).toEqual('Owl') // Success!
})
})
...它应该工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.