Testing Select components in React can be challenging due to factors such as simulating user interactions, handling asynchronous behavior, variability in implementation, the complexity of nested components, and accessibility concerns. React Testing Library simplifies this process, but it doesn’t eliminate all the challenges.
In this post, we’ll explore some of the best practices for testing Select components with React Testing Library. We’ll begin by writing tests for a wrapper on top of a native HTML select, and then proceed to test the components using Select components from the popular react-select library. The final code is available on GitHub.
Setting up
Before writing tests, we’ll create a sample React app and install the react-select package.
npx create-react-app test-select npm i react-select
Testing native HTML select
We’ll begin by testing a component that acts as a wrapper for the native HTML select element. Having such a component is quite common, as it abstracts the logic of rendering options.
We’ll place all the code inside the components folder. We start by creating a Select.js file there with our first component.