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