酶玩笑反应，我不知道为什么我的道具在模拟这个'change'事件后没有更新。谢谢

Question

我正试图测试与酶jest控制形式组件。我模拟了一个"改变"事件，它应该调用我的handleFormChange方法，它作为一个prop从parent传递下来。当我检查ImproveListing组件的道具时，它们在我模拟此事件后没有更新/更改。由于

describe('<ImproveListing /> Form', () => {
let improveListing;
let app;
let instance;
beforeEach(() => {
app = mount(<Attraction />);
instance = app.instance();
improveListing = mount(<ImproveListing />);
});
afterEach(() => {
app.unmount();
improveListing.unmount();
});
test('it should update form data with state', () => {
improveListing.setProps({ clicked: true });
const input = improveListing.find('input').first();
input.simulate('change', { target: { value: 'test', name: 'description' } });
const changedInput = improveListing.find('input').first();
expect(changedInput.props().value).toEqual('test');
});

这是运行测试后的控制台输出。

<Overview /> › <ImproveListing /> Form › HandleFormChange › it should update form data with state
expect(received).toEqual(expected) // deep equality
Expected: "test"
Received: ""
82 |         // improveListing.setProps({ form: { description: 'Test' } });
83 |         const changedInput = improveListing.find('input').first();
> 84 |         expect(changedInput.props().value).toEqual('test');
|                                            ^
85 |       });
86 |     });
87 |   });

//ImproveListing.js
import React from 'react';
import PropTypes from 'prop-types';
const ImproveListing = ({ clicked, form, handleFormChange, handleClick }) => (
<div className="improveListing">
{clicked ? (
<form className="improve" onSubmit={() => {}}>
<input name="description" placeholder="description" type="text" value={form.description} onChange={handleFormChange} />
</form>
) : <div onClick={handleClick}>Improve This Listing</div>}
</div>
);
//Overview.js (parent to ImproveListing)
const Overview = ({ overview, form, handleFormChange, clicked, handleClick }) => (
<div className="overview">
<ImproveListing
form={form}
handleFormChange={handleFormChange}
clicked={clicked}
handleClick={handleClick}
/>
</div>
);
//attraction.js (parent to overview)
export default class Attraction extends React.Component {
constructor(props) {
super(props);
this.state = {
current: null,
likeHover: false,
form: {
description: '',
isOpen: false,
suggestedDuration: 0,
address: '',
},
clickImproved: false,
};
this.updateHeartHover = this.updateHeartHover.bind(this);
this.handleFormChange = this.handleFormChange.bind(this);
this.handleClick = this.handleClick.bind(this);
}
handleFormChange(e) {
const { form } = this.state;
this.setState({
form: {
...form,
[e.target.name]: e.target.value,
},
});
}
render() {
const {
current, likeHover, form, clickImproved,
} = this.state;
return (
<>
{current ? (
<div className="attraction">

<Overview
overview={current.overview}
form={form}
clicked={clickImproved}
handleClick={this.handleClick}
handleFormChange={this.handleFormChange}
/>

</>
);
}
}

Answer 1

测试通过。

test('it should call handleFormChange when there is a change', () => {
improveListing.setProps({ clicked: true });
const spy = jest.spyOn(instance, 'handleFormChange');
improveListing.setProps({ handleFormChange: instance.handleFormChange });
const input = improveListing.find('input').first();
input.simulate('change');
expect(spy).toHaveBeenCalledTimes(1);
});