How to Test onChange Events in React Testing Library
Ferenc Almasi • 2022 04 September •
2 min read
To test onChange events in React Testing Library, use the fireEvent.change API in the following way:
import React from 'react'
import { fireEvent, render, screen } from '@testing-library/react'
describe('onChange events', () => {
it('should test onChange behavior', () => {
render(<Dropdown />)
const select = screen.getByRole('select')
const testingLibrary = screen.getByRole('option', { name: 'React Testing Library' })
const jest = screen.getByRole('option', { name: 'Jest' })
fireEvent.change(select, { target: { value: '🐙' } })
expect(select.value).toBe('🐙')
expect(testingLibrary.selected).toBe(true)
fireEvent.change(select, { target: { value: '🎴' } })
expect(select.value).toBe('🎴')
expect(jest.selected).toBe(true)
})
})To select an option from an HTML select element, you will need to grab the element with either screen.getByTestId or screen.getByRole, and pass it over to fireEvent.change with a target.value object for targeting the right option.
Notice that you can also grab elements by specifying the value of their attributes inside an object, passed as a second parameter to screen.getByRole.
Finally, to test if the correct element is selected, we can use select.value and option.selected for assertions.
expect(select.value).toBe('🎴')
expect(jest.selected).toBe(true)
Rocket Launch Your Career
Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:
Courses
Recommended
How to Create a Configurable Tabs Component in React
11 min read • React v18.2
How to Create a Responsive Timeline Component in React
10 min read • React v18.2
How to Create Dynamic Routes in Astro
9 min read