Back to all reviewers

prefer findBy async queries

mastodon/mastodon
Based on 2 comments
TSX

When testing components that require waiting for elements to appear, prefer using findBy* queries over waitFor + getBy* combinations. The findBy* queries have built-in waiting functionality that makes tests more readable and reliable.

Testing TSX

Reviewer Prompt

When testing components that require waiting for elements to appear, prefer using findBy* queries over waitFor + getBy* combinations. The findBy* queries have built-in waiting functionality that makes tests more readable and reliable.

Instead of:

await waitFor(() => canvas.getByRole('button'));
await userEvent.click(canvas.getByRole('button'));

Use:

const button = await canvas.findByRole('button');
await userEvent.click(button);

This approach reduces code duplication, improves readability, and leverages the testing library’s built-in async waiting mechanisms. While some scenarios may still require waitFor for complex conditions, findBy* should be the default choice for waiting for elements to appear.

2
Comments Analyzed
TSX
Primary Language
Testing
Category

Source Discussions