Testing handle change function in React using Enzyme and Jest

Question

My react component contains this code

 handleChange = e => {
    this.setState({
      num: e.target.value
    });
  };

  render() {
    return (
      <div>
        <h2>Delete cat :(</h2>
        <input
          onChange={this.handleChange}
          type="number"
          placeholder="enter id here"
        />
        <button id="deleteBtn" onClick={this.deleteOne}>
          Delete
        </button>
      </div>
    );
  }
}

As you can see, the handleChange function fires when the input changes and will update state from there.

How can I test this using Enzyme? I've tried

 it("Updates the state", () => {
     const wrapper = shallow(
       <Provider store={store}>
         <DeleteOne />
       </Provider>
     );
     const input = wrapper.find("input");

     input.simulate("change", { target: { num: 2} });

     expect(wrapper.state().num).toEqual(2);
   });
});

I had to attempt to wrap it in store because I'm using Redux and exporting a connected component. I've been Googling the last hour and trying all sorts but weren't able to get this test passing. Please send help :) cheers

PS: I've tested the button click no worries as it just runs a function (no state update).

I think it [duplicate](https://stackoverflow.com/questions/43426885/enzyme-simulate-an-onchange-event). Please search before asking questions — Vu Luu, Feb 28 '19 at 08:47
Perhaps you have to `mount` instead of `shallow` b/c you test inner component — Alejandro, Feb 28 '19 at 08:52
Thanks I'll try mount and the thread above and get back to you, from memory I had issues mounting as it's a redux connected component. I'm just at work but will be back later — Leslie Alldridge, Feb 28 '19 at 09:07
Do you access both the button and the input field? I mean it doesn't throw any error because the wrapper couldn't find any node. — zsgomori, Feb 28 '19 at 09:30

score 5 · Accepted Answer · answered Mar 01 '19 at 05:07

I typically export both the connected component for use in the app, and the component itself for testing.

Looks like you've got a small typo, pass { target: { value: 2 } } as your event.

Here is a working example based on the code you provided:

import * as React from 'react';
import { shallow } from 'enzyme';

class DeleteOne extends React.Component {

  handleChange = e => {
    this.setState({
      num: e.target.value
    });
  };

  render() {
    return (
      <div>
        <h2>Delete cat :(</h2>
        <input
          onChange={this.handleChange}
          type="number"
          placeholder="enter id here"
        />
        <button id="deleteBtn" onClick={this.deleteOne}>
          Delete
      </button>
      </div>
    );
  }
}

it("Updates the state", () => {
  const wrapper = shallow(<DeleteOne />);
  const input = wrapper.find("input");
  input.simulate("change", { target: { value: 2 } });  // 'value' instead of 'num'
  expect(wrapper.state().num).toEqual(2);  // SUCCESS
});

your response helped me save my late evening troubleshooting.. Can't thank you enough.. — SanjoS30, Aug 20 '21 at 02:37

Testing handle change function in React using Enzyme and Jest

1 Answers1