Enzyme 没有测试 onChange 方法

Question

我正在尝试通过将模拟数据传递给 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 - Testing using Jest Enzyme - check?，但是他们的答案没有帮助

App.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')

  })
})

Answer 1

您的事件处理程序根据e.target.value 设置状态：

onChange(e) {
    this.setState({query: e.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!
  })
})

...它应该可以工作。