React Testing Library DOM interaction functions take extremely long amount of time

Are you experiencing long wait times when using React Testing Library’s DOM interaction functions? Don’t worry, you’re not alone. Many developers have faced this issue and have found different solutions to improve the performance of these functions. In this blog post, we will explore some of these solutions and provide code snippets for each one.

Solution 1: Use `getByTestId` instead of `getByText`

One common reason for slow performance is the use of getByText function, which searches for elements based on their text content. This function can be slow when dealing with large DOM trees. Instead, you can use the getByTestId function, which searches for elements based on a custom data-testid attribute. This attribute can be added to the elements you want to test.

Here’s an example:

import React from 'react';
import { render } from '@testing-library/react';

const MyComponent = () => (
  
Hello World
);

test('should find element using getByTestId', () => {
  const { getByTestId } = render();
  const element = getByTestId('my-element');
  expect(element).toBeInTheDocument();
});

Solution 2: Use `queryBy` functions instead of `getBy` functions

Another solution is to use the queryBy functions instead of the getBy functions. The getBy functions throw an error if the element is not found, which can cause delays. On the other hand, the queryBy functions return null if the element is not found, resulting in faster execution.

Here’s an example:

import React from 'react';
import { render } from '@testing-library/react';

const MyComponent = () => (
  
Hello World
);

test('should find element using queryByTestId', () => {
  const { queryByTestId } = render();
  const element = queryByTestId('my-element');
  expect(element).toBeInTheDocument();
});

Solution 3: Use `screen` object instead of destructuring

Using the screen object instead of destructuring the functions can also improve performance. The screen object is a global variable provided by React Testing Library and can be accessed directly without destructuring.

Here’s an example:

import React from 'react';
import { render, screen } from '@testing-library/react';

const MyComponent = () => (
  
Hello World
);

test('should find element using screen.getByTestId', () => {
  render();
  const element = screen.getByTestId('my-element');
  expect(element).toBeInTheDocument();
});

These are just a few solutions to improve the performance of React Testing Library’s DOM interaction functions. Depending on your specific use case, one solution may work better than the others. Feel free to experiment and find the best approach for your project.

Happy testing!