vendredi 15 juin 2018

Jest: Test handleSubmit with value

I'm trying to test a handleSubmit function which checks an input field and logs either "Try again" or "Correct" depending on whether the value in the input field corresponds to the addition of two randomly generated numbers in the state.

My form is as follows:

What is {this.state.numbers.x} + {this.state.numbers.y}?
              <div className="arithmetic__form-container">
                <form onSubmit={this.handleSubmit}>
                  <label>
                    Answer: &nbsp;&nbsp;
                    <input className="input-field" type="text" value={this.state.value} onChange={this.handleChange} />
                  </label>
                  <button className="btn-submit" type="submit" onClick={(e) => (this.handleSubmit) ? this.handleSubmit(e) : null}>Submit</button>
                </form>
              </div>

and my handleSubmit function is as follows:

  handleSubmit(event) {
    var isCorrect = this.state.numbers.x + this.state.numbers.y == this.state.value ? this.updateVals()  : alert("Try again");
    if(isCorrect) console.log("Yes!");
    event.preventDefault();
  }

and I'm trying to set the value in the input field to be those two values added together and tested like so:

it("passes with correct input", () => {
  const handleSubmit = jest.fn();
  let wrapper = mount(<Arithmetic />);
  wrapper.instance().handleSubmit = handleSubmit;
  wrapper.find('.input-field').getDOMNode().value = wrapper.update().state().numbers.x + wrapper.update().state().numbers.y;
  wrapper.find('.input-field').simulate('change');
  wrapper.find('.btn-submit').simulate('click');
  expect(handleSubmit).toHaveBeenCalledWith(wrapper.update().state().numbers.x + wrapper.update().state().numbers.y);
});

I get the following error message from Jest about an object being passed in instead of a value:

Expected mock function to have been called with:
  9
as argument 1, but it was called with
  {"_dispatchInstances": null, "_dispatchListeners": null, "_targetInst": {"_debugID": 84, "_debugIsCurrentlyTiming": false, "_debugOwner": [FiberNode], "_debugSource": null, "alternate": [FiberNode], "child": null, "effectTag": 4, "expirationTime": 0, "firstEffect": null, "index": 1, "key": null, "lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 0, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseTime": 0, "sibling": null, "stateNode": <button … />, "tag": 5, "treeBaseTime": 0, "type": "button", "updateQueue": null}, "bubbles": undefined, "cancelable": undefined, "currentTarget": null, "defaultPrevented": undefined, "dispatchConfig": {"dependencies": [Array], "isInteractive": true, "phasedRegistrationNames": [Object]}, "eventPhase": undefined, "isDefaultPrevented": [Function anonymous], "isPersistent": [Function anonymous], "isPropagationStopped": [Function anonymous], "isTrusted": undefined, "nativeEvent": {"target": <button … />, "type": "click"}, "target": <button class="btn-submit" type="submit">Submit</button>, "timeStamp": 1529080677084, "type": "click"}.

Difference:

  Comparing two different types of values. Expected number but received object.

Aucun commentaire:

Enregistrer un commentaire