web-dev-qa-db-fra.com

Enzyme simule un événement onChange

Je teste un composant de réaction avec du moka et de l'enzyme. Voici le composant (raccourci pour la 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);
})

J'attends que lorsque l'utilisateur tape du texte dans le <input> box la méthode handleChange 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)

Qu'est-ce que je fais mal?

MODIFIER

Je devrais préciser, mon objectif est de vérifier que la méthode handleChange est appelée. Comment puis je faire ça?

javascriptreactjsmochaenzyme
27
stoebelj

Vous pouvez simplement espionner la méthode directement via le prototype.

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

Vous pouvez également utiliser spy sur la méthode de l'instance, mais vous devez effectuer une mise à jour forcée car le composant est déjà rendu après l'appel de mount, ce qui signifie que onChange est déjà lié à son 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);
})
33
Evan Sebastian