fireEvent not properly calling event in react-testing-library

Question

I'm currently testing an input using Jest & react-testing-library. I'm trying to test whether the onChange function fires whenever my input's field changes. Here's an example of my code:

const placeHolder = 'first name';
const onChange = jest.fn();

test('<InputText/>', () => {

  const {getByPlaceholderText} = render(
    <InputText placeholder={placeHolder} onChange={onChange} />
  );

  const input = getByPlaceholderText(placeHolder);

  fireEvent.change(input, {
    target: {value: 'pls work'},
  });

  expect(onChange).toHaveBeenCalledTimes(1);
});

Here's what a get in the terminal when I run this test:

expect(jest.fn()).toHaveBeenCalledTimes(1)

Expected mock function to have been called one time, but it was called zero times.

I've used the fireEvent.click() function in other tests without any issues yet, but fireEvent.change() doesn't seem to be working for me.

This has been noted as an issue in Github [CLOSED].

Chance Smith
– Chance Smith

2018-09-19 15:55:22 +00:00
Commented Sep 19, 2018 at 15:55 — Chance Smith
– Chance Smith, Commented Sep 19, 2018 at 15:55

Zach · Accepted Answer · 2018-09-19 18:40:53Z

5

It turns out that my <InputText/> component takes in a onChangeFunc prop, while I was trying to give it a regular onChange prop. Once I realized that and gave it the correct prop, it fixed the issue.

answered Sep 19, 2018 at 18:40

Zach

8911 gold badge11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cigien · Accepted Answer · 2021-11-27 22:01:45Z

1

Instead of calling this

expect(onChange).toHaveBeenCalledTimes(1);

you can try

expect(onChange).toHaveBeenCalled();

edited Nov 27, 2021 at 22:01

cigien

61.2k11 gold badges86 silver badges124 bronze badges

answered Nov 27, 2021 at 19:45

Tanish Raj

435 bronze badges

Collectives™ on Stack Overflow

fireEvent not properly calling event in react-testing-library

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related