NH

Testing with React Testing Library queries helps make apps more accessible

September 14, 2020

Unlike Enzyme where finding an element is typically done using css queries for say the class, id, or element type, using React Testing Library’s built in querying methods limits the ways elements can be found. getByLabelText() is particularly helpful to ensure form elements are properly labeled.

// Example of finding an input element with Enzyme
// We won't know from this test if the input has a proper label for accessibility
const firstNameInput = wrapper.find('input.firstName');
// Example of finding an input element with React Testing Library
// If the input isn't labeled then this will throw an error indicating there's no element with that label
// With getByLabelText, regex can also be used to provide looser search
const firstNameInput = screen.getByLabelText(/first name/i);

References


Hey, I'm Nancy Huynh
I'm a self-taught front-end developer relaxing in Toronto
This is a collection of new things I'm learning