This rule raises an issue when a promise returned by a Testing Library asynchronous query is not handled.

Why is this an issue?

The Testing Library findBy* and findAllBy* queries return a promise that resolves when the requested element or elements become available. Ignoring that promise lets the test continue without waiting for the query to finish. Assertions can then run before the expected element is available, or the test can finish without observing that the query failed.

Handle the promise by awaiting it, returning it to a caller that handles it, or chaining it into a promise-aware expression. The rule also reports a call to a wrapper that returns an asynchronous query when that returned promise is left unhandled.

Code examples

Noncompliant code example

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

test('shows the confirmation message', async () => {
  const message = screen.findByText('Saved'); // Noncompliant: the promise returned by "findByText" is unhandled, so the test can continue before the queried element is available

  expect(message).toBeVisible();
});

Compliant solution

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

test('shows the confirmation message', async () => {
  const message = await screen.findByText('Saved');

  expect(message).toBeVisible();
});

Noncompliant code example

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

const findSubmitButton = () => screen.findByRole('button', { name: 'Submit' });

test('submits the form', async () => {
  const submitButton = findSubmitButton(); // Noncompliant: the promise returned by async-query wrapper "findSubmitButton" is unhandled, so callers can proceed before its result is ready

  expect(submitButton).toBeVisible();
});

Compliant solution

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

const findSubmitButton = () => screen.findByRole('button', { name: 'Submit' });

test('submits the form', async () => {
  const submitButton = await findSubmitButton();

  expect(submitButton).toBeVisible();
});

Resources

Documentation