Not simulating 'change' using enzyme

user_1885838 0
Viewed 244

I have a Reactjs component and it has one button and a date-range picker. I want to simulate onclick and onchange events of button and picker respectively. I'm able to simulate onclick of the button. but on change of datepicker is not working

I have tried this

headerComponent.find(`#prev_button`).at(1).simulate("click");
headerComponent.find(`#dropdown`).at(1).simulate("change", { value: "t" });

please see this sandbox click here for full code and test file

enzyme jestjs reactjs
2 Answers

Based on Enzyme documentation you make a mistake on your second argument on simulate function.

To simulate changes on the input, you should change it like this :

headerComponent.find(`#dropdown`).at(1).simulate("change", { target: { value: "t" } });
user_65144480

Testing with enzyme is tricky. You should try not to test dependencies because you trust those are already tested. Having said that, you could shallow render instead of mounting and look for the RangePicker component in the shallow tree, get the handler you are passing in the onChange prop and call it manually, then check the callback prop you pass to your component is called with the expected value.

describe.only("test", () => {
  it("should render", () => {
    const callBackToSetDates = jest.fn();
    const callBackToSetFilter = jest.fn();
    const wrapper = shallow(
      <Header
        {...headerProps1}
        callBackToSetDates={callBackToSetDates}
        callBackToSetFilter={callBackToSetFilter}
      />
    );
    const rangePickerOnChange = wrapper.find("RangePicker").prop("onChange");
    rangePickerOnChange("someValue");
    expect(callBackToSetDates).toHaveBeenCalledWith("someValue");
  });
});

the purpose is to test only the logic you add inside your component, i.e., you transform the value you get from the RangePicker to something else


        <RangePicker
          ...
          onChange={(value) => {
             callBackToSetDates(`I'm transforming ${value}`);
          }}
        />

and in your test

    rangePickerOnChange("someValue");
    expect(callBackToSetDates).toHaveBeenCalledWith("I'm transforming someValue");

you can see it working here https://codesandbox.io/s/cool-rosalind-uec6t?file=/src/tests/index.test.js

If you really want to keep testing what the actual user sees, you'll need to fire the events that the user does when using the component. In this case: you need to click the input, look for a date, click it, then click another date to completely fire the onChange event of the RangePicker component. You might look at how antd test it and copy the necessary jest configuration they have to mock some DOM APIs

user_18680080
Related