Onchange event not being fired when using fireEvent.change

See original GitHub issue

When trying to use fireEvent.change on an input The onChange event isn’t triggered. I am seeing the onBlur event is triggered for fireEvent.blur

  • “jest”: “24.9.0”,
  • “jest-environment-jsdom-fourteen”: “^0.1.0”,
  • “jest-localstorage-mock”: “2.4.0”,
  • “jest-serializer-enzyme”: “1.0.0”,
  • “jest-skipped-reporter”: “0.0.4”,
  • “jest-trx-results-processor”: “0.2.0”,
  • “jest-watch-typeahead”: “0.3.0”,
  • @testing-library/react”: “^9.3.0”,
  • “react-hooks-testing-library”: “0.4.0”,
  • “ts-jest”: “24.1.0”,
  • “react”: “16.9”,
  • “react-dom”: “16.9”,
  • node version: v8.16.1
  • yarn “1.17.3”

What you did:

when I use fireEvent.change(input, {target: {value: ‘bob’}} OnChange isn’t triggered When I use fireEvent.blur(input) Blur is triggered When I use simulate for react-dom/test-utils it works.

Things I’ve tried

using “jest-environment-jsdom-fourteen”: “^0.1.0”, checking to make sure input fields have type set.

example test

it.only('should map errors', async () => {
        const { container, getByLabelText, getByText } = await renderWithState();
        const routingNumber = getByLabelText('Routing number') as HTMLInputElement;
        const accountNumber = getByLabelText('Account number') as HTMLInputElement;
        const accountConfirm = getByLabelText('Confirm account number') as HTMLInputElement;
        fireEvent.change(routingNumber, { target: { value: '110000000', name: EBankingFieldNames.routingNumber } });
        fireEvent.change(accountNumber, { target: { value: '000444444440', name: EBankingFieldNames.accountNumber } });
        fireEvent.change(accountConfirm, {
            target: { value: '000444444440', name: EBankingFieldNames.accountNumberConfirm },
        });
        await waitForDomChange({ container });
        fireEvent.click(getByText('Save'));
        await waitForDomChange({ container });
        expect(getByText('Please enter a valid routing number'));
    });

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:20 (9 by maintainers)

github_iconTop GitHub Comments

23reactions
connormeredithcommented, Nov 17, 2019

I did some digging into this and it looks like the root cause is JSDOM not defaulting invalid input types to "text" as per the spec:

The missing value default and the invalid value default are the Text state.

I tracked it down to React only creating change events when the input has a valid type: https://github.com/facebook/react/blob/ab1a4f249e61045d523ddbbfb840e868afbbf785/packages/react-dom/src/events/ChangeEventPlugin.js#L275 https://github.com/facebook/react/blob/ab1a4f249e61045d523ddbbfb840e868afbbf785/packages/shared/isTextInputElement.js#L13-L29

I’ve opened a PR with JSDOM that should address the issue, however I think Jest is using JSDOM 14 so it might be some time for this change to filter through the right packages.

5reactions
eps1loncommented, May 19, 2020

@RobertSigma, you can’t change the value of a radio button to “a”… that doesn’t make sense. For radio and checkboxes you “click” them.

I’m starting to think we should add some warnings to fireEvent.change in dom-testing-library. It feels like we get a lot of reports that come down to wrong usage of fireEvent.change with certain input types (e.g. type="date" and non iso values).

Read more comments on GitHub >

github_iconTop Results From Across the Web

fireEvent.change does not trigger onChange listener
The problem is that spyOn is called after the event is fired. Change the test code to: test('when user changes the file input, ......
Read more >
Firing Events - Testing Library
Convenience methods for creating DOM events that can then be fired by fireEvent , allowing you to have a reference to the event...
Read more >
How to use the react-testing-library.fireEvent.change function ...
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues...
Read more >
onChange event doesn't work for checkbox with fireEvent in ...
I am writing tests for my React application and I got some problem. My checkbox does not change checked property state when I...
Read more >
HTMLElement: change event - Web APIs | MDN
The change event is fired for <input> , <select> , and <textarea> elements when the user modifies the element's value.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found