Enzyme simule un événement onChange
Je teste un de réagir avec volet de Moka et de l'Enzyme. Ici est le composant (raccourcie pour des raisons de simplicité, bien sûr):
class New extends React.Component {
//shortened for simplicity
handleChange(event) {
//handle changing state of input
const target = event.target;
const value = target.value;
const name = target.name
this.setState({[name]: value})
}
render() {
return(
<div>
<form onSubmit={this.handleSubmit}>
<div className="form-group row">
<label className="col-2 col-form-label form-text">Poll Name</label>
<div className="col-10">
<input
className="form-control"
ref="pollName"
name="pollName"
type="text"
value={this.state.pollName}
onChange={this.handleChange}
/>
</div>
</div>
<input className="btn btn-info" type="submit" value="Submit" />
</form>
</div>
)
}
}
Et voici le test:
it("responds to name change", done => {
const handleChangeSpy = sinon.spy();
const event = {target: {name: "pollName", value: "spam"}};
const wrap = mount(
<New handleChange={handleChangeSpy} />
);
wrap.ref('pollName').simulate('change', event);
expect(handleChangeSpy.calledOnce).to.equal(true);
})
Je m'attends à ce que lorsque l'utilisateur tape du texte dans le <input>
zone de la handleChange
méthode sera appelée. Le test ci-dessus échoue avec:
AssertionError: expected false to equal true
+ expected - actual
-false
+true
at Context.<anonymous> (test/components/new_component_test.js:71:45)
Ce que je fais mal?
MODIFIER
Je me dois de préciser, mon objectif est de vérifier que la méthode handleChange
est appelé. Comment puis-je le faire?
source d'informationauteur stoebelj
Vous devez vous connecter pour publier un commentaire.
Vous pouvez espionner à la méthode directement via le prototype.
Alternativement, vous pouvez utiliser spy sur l'instance de la méthode, mais vous avez à faire forcer une mise à jour car le composant est déjà rendu après le mont est appelée, ce qui signifie que le onChange est déjà lié à son origine.