Onchange event not being fired when using fireEvent.change
See original GitHub issueWhen 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”,
nodeversion: 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:
- Created 4 years ago
- Reactions:1
- Comments:20 (9 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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:I tracked it down to React only creating
changeevents when the input has a validtype: 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-L29I’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.
I’m starting to think we should add some warnings to
fireEvent.changein dom-testing-library. It feels like we get a lot of reports that come down to wrong usage offireEvent.changewith certain input types (e.g.type="date"and non iso values).