javascript - ejemplo - Enzima simular un evento onChange

onchange jquery input text

Question

Estoy probando un componente de reacción con Mocha y Enzyme. Aquí está el componente (acortado por simplicidad, por supuesto):

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>
)
}
}

Y aquí está la prueba:

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);
})

Estoy esperando que cuando el usuario handleChange texto en el cuadro <input> handleChange método handleChange . La prueba anterior falla con:

AssertionError: expected false to equal true
+ expected - actual
-false
+true
at Context.<anonymous> (test/components/new_component_test.js:71:45)

¿Qué estoy haciendo mal?

EDITAR

Debería aclarar, mi objetivo es probar que se llama el método handleChange . ¿Cómo puedo hacer eso?

Answer 1

Simplemente puede espiar el método directamente a través del prototipo.

it("responds to name change", done => {
const handleChangeSpy = sinon.spy(New.prototype, "handleChange");
const event = {target: {name: "pollName", value: "spam"}};
const wrap = mount(
<New />
);
wrap.ref(''pollName'').simulate(''change'', event);
expect(handleChangeSpy.calledOnce).to.equal(true);
})

Alternativamente, puede usar el método espía en la instancia, pero tiene que hacer una actualización forzada porque el componente ya está renderizado después de llamar al montaje, lo que significa que onChange ya está vinculado a su original.

it("responds to name change", done => {
const event = {target: {name: "pollName", value: "spam"}};
const wrap = mount(
<New />
);
const handleChangeSpy = sinon.spy(wrap.instance(), "handleChange");
wrap.update(); // Force re-render
wrap.ref(''pollName'').simulate(''change'', event);
expect(handleChangeSpy.calledOnce).to.equal(true);
})