Testing onChange Event with jest.. onChange is not firing/calling even if we pass onChange function through props. any suggestion

Question

the below code is returned from render method. I am sending index value as 0 through props. i am also sending onChange function through props. but onchange function is not calling when i do npm run test.

beneficiary.js

 {props.isEditing ? 

    <Textbox 

       id={`beneficiary-value-${props.index}`}

       onChange={(e) => props.onChange(e)}

       inputType={'number'}

    /> :

    <span className={"percentage"}>{`${props.beneficiary.percentage}%`}</span>

  }

.

test.js:

test('Beneficiaries renders without crashing', () => {

let beneficiary =
{
   "name": "Emma Smith",
   "dob": "",
   "relationship": "",
   "percentage": "",
   "hasChanged": false
};
    const onChange = jest.fn();

    const dom = render(

        <BeneficiaryItem beneficiary={beneficiary} index={0} isEditing={true} onChange={(e) => onChange(e)} />

    );

    const beneficiaryValue = dom.container.querySelector("#beneficiary-value-0");

    fireEvent.change(beneficiaryValue);

})

the above is my test case file.

Answer 1

Change event should be fired as below, it expects new value as an argument:

fireEvent.change(beneficiaryValue, {
  target: { value: "Changed Value" }
});

Please refer to React testing library documentation for more details.