Recently, I used react-select component in one of my projects. I was using react-select component for the first time and this is my learning. This article sums up various ways to test react-select component using React Testing Library.
At the time of writing this article, I am using react-select version 5.5.4 I am using React Testing Library to test react-select component.
Firing the react-select event seems to be a bit tricky.
Using library react-select-event
react-select-event library provides a set of utilities to interact with react-select events. It is a very useful library to test react-select component.
Read more about it in official page.
Here is an example code from react-select-event official page.
import React from 'react'
import Select from 'react-select'
import { render } from '@testing-library/react'
import selectEvent from 'react-select-event'
const { getByTestId, getByLabelText } = render(
<form data-testid="form">
<label htmlFor="food">Food</label>
<Select options={OPTIONS} name="food" inputId="food" isMulti />
</form>,
)
expect(getByTestId('form')).toHaveFormValues({ food: '' }) // empty select
// select two values...
await selectEvent.select(getByLabelText('Food'), ['Strawberry', 'Mango'])
expect(getByTestId('form')).toHaveFormValues({ food: ['strawberry', 'mango'] })
// ...and add a third one
await selectEvent.select(getByLabelText('Food'), 'Chocolate')
expect(getByTestId('form')).toHaveFormValues({
food: ['strawberry', 'mango', 'chocolate'],
})
In my cases, library did not work as expected. Dropdown I was trying to test don’t have form and label tags. Maybe I was missing something but didn’t wasting my time in debugging, I tried other ways which worked for me and moved on to another test.
Using fireEvent
Instead of using library, we can use fireEvent to test react-select component. Its quite same approach as used in library but we need to write some extra code to get the desired result.
import React from 'react'
import Select from 'react-select'
import { render, fireEvent, screen } from '@testing-library/react'
describe('Example test', () => {
it('should select the option', () => {
const OPTION = [
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' },
{ value: 'three', label: 'Three' },
]
const {getByTestId, getByLabelText} = render(
<div data-testid='test'>
<Select options={OPTIONS} name="food" inputId="food" isMulti />
</div>
)
// step: 1 Opens the dropdown options list
const selectWrapper = screen.getByTestId('test')
const input = selectWrapper.firstChild
fireEvent.keyDown(input, { keyCode: 40 })
// step: 2 Selects the dropdown option and close the dropdown options list
const option = await screen.findByText('One') // its a label in options list
fireEvent.click(option)
// step: 3 Check the selected value
expect(getByTestId('test')).toHaveTextContent('One')
})
})
Conclusion
I hope this article will help you to test react-select component using React Testing Library. If you have any other way to test react-select component using React Testing Library, please share it in the comment section.
