Skip to content

Latest commit

 

History

History
76 lines (59 loc) · 1.72 KB

await-async-query.md

File metadata and controls

76 lines (59 loc) · 1.72 KB
Raw

Enforce async queries to have proper await (await-async-query)

Ensure that promises returned by async queries are handled properly.

Rule Details

Some of the queries variants that Testing Library provides are asynchronous as they return a promise which resolves when elements are found. Those queries variants are:

  • findBy*
  • findAllBy*

This rule aims to prevent users from forgetting to await the returned promise from those async queries to be fulfilled, which could lead to errors in the tests. The promises can be handled by using either await operator or then method.

Examples of incorrect code for this rule:

const foo = () => {
  // ...
  const rows = findAllByRole('row');
  // ...
};

const bar = () => {
  // ...
  findByText('submit');
  // ...
};

const baz = () => {
  // ...
  screen.findAllByPlaceholderText('name');
  // ...
};

Examples of correct code for this rule:

// `await` operator is correct
const foo = async () => {
  // ...
  const rows = await findAllByRole('row');
  // ...
};

// `then` method is correct
const bar = () => {
  // ...
  findByText('submit').then(() => {
    // ...
  });
};

const baz = () => {
  // ...
  await screen.findAllByPlaceholderText('name');
  // ...
};

// return the promise within a function is correct too!
const findMyButton = () => findByText('my button');

// using a resolves/rejects matcher is also correct
expect(findByTestId('alert')).resolves.toBe('Success');
expect(findByTestId('alert')).rejects.toBe('Error');

Further Reading