# Testing Library ByRole Performance Improvements

DevFeed: [Testing Library ByRole Performance Improvements](<https://devfeed.tech/articles/testing-library-byrole-performance-improvements-19750.md>)

Original publisher: [Read original article](<https://tech.findmypast.com/testing-libraray-byrole-performance-improvements/>)

Author: Jonathan Darrer

Published: 2022-04-13T00:00:00Z

Content type: tutorial

Language: en

Sources: [Findmypast](<https://devfeed.tech/sources/findmypast.md>)

Topics: [Testing](<https://devfeed.tech/topics/testing.md>), [React](<https://devfeed.tech/topics/react.md>), [ui](<https://devfeed.tech/topics/ui.md>)

Tags: [improvements](<https://devfeed.tech/tags/improvements.md>), [performance](<https://devfeed.tech/tags/performance.md>), [react](<https://devfeed.tech/tags/react.md>), [testing](<https://devfeed.tech/tags/testing.md>), [testing-library](<https://devfeed.tech/tags/testing-library.md>), [tests](<https://devfeed.tech/tags/tests.md>)

## AI overview

This article explains how Testing Library queries affect test performance in React UI tests. It compares role-based queries with the more limited ByText and ByLabelText queries, notes that they are not interchangeable for every assertion, and describes contextualizing queries when necessary. In the tested instances, the recommended changes improved performance from 320 ms to 16 ms, a 95% improvement.

## Source excerpt

We use Testing Library to test our React UI pages and components. For example, we may have the following HelpFaqsTile component in a page: const HelpFaqsTile = () => ( <CardWithStyleOverrides data-testid="help-faqs-tile"> <DashboardImage src={require('../../assets/cartoon-lifebelt.png')} alt="a floating lifesaver" /> <TileContentWrapper> <h4>Need some help?</h4> <p>Our FAQs are a lifesaver</p> <Button as={Link} to="/help"> Search FAQs </Button> </TileContentWrapper> </CardWithStyleOverrides> ); export default HelpFaqsTile; Let suppose we want to test whether "the 'Help Faqs' tile provides a link with the text Search FAQs": import { act, render } from '@testing-library/react'; await render( <PageWhichContainsTheHelpFaqsTile /> ); const buttonToFaq = screen.getByRole('link', { name: 'Search FAQs', }); expect(buttonToFaq).toBeInTheDocument(); *ByRole methods like screen.getAllByRole('link', {name: 'Search FAQs'}) can be slow due to the way in which they search through the entire DOM tree looking for nodes matching the role type, and optionally a variety of attributes (label, aria-label, etc. depending on additional criteria, here name). In contrast, the more performant *ByText and *ByLabelText methods look for text nodes and nodes with more limited attributes (label and aria-label only) respectively. So, we could use screen.getByText('Search FAQs') instead: import { act, render } from '@testing-library/react'; await render( <PageWhichContainsTheHelpFaqsTile /> ); const buttonToFaq = screen.getByText('Search FAQs'); expect(buttonToFaq).toBeInTheDocument(); They are not like for like replacements however. Let's suppose we want to test "the 'Help Faqs' tile provides a link which directs the user to our FAQ's" import { act, render } from '@testing-library/react'; await render( <PageWhichContainsTheHelpFaqsTile /> ); const buttonToFaq = screen.getByRole('link', { name: 'Search FAQs', }); expect(buttonToFaq).toBeInTheDocument(); expect(buttonToFaq).toHaveAttribute('href', '/