javascript - Testing Library findBy* queries only working with async/await

Question

From the documentation, findBy queries return a Promise. But it seems like using these queries with Promise.prototype.catch() doesn't work in cases where using them with async/await + try...catch does.

For example, 'not found' gets logged here as expected:

const { screen } = require('@testing-library/dom');

beforeAll(() => {
  document.body.innerHTML = `
    <header></header>
  `;
});

test('DOM', async () => {
  try {
    await screen.findByRole('aaaaa');
    console.log('found');
  } catch {
    console.log('not found');
  }
});

However, nothing gets logged here:

test('DOM', () => {
  screen.findByRole('aaaaa')
    .then(() => {
      console.log('found');
    })
    .catch(() => {
      console.log('not found');
    });
});

Is there a reason for this?

question from:https://stackoverflow.com/questions/65943875/testing-library-findby-queries-only-working-with-async-await

Answer 1

You simply need to return the Promise so your testing framework (probably Jest) knows to wait for the test to finish. Otherwise Jest has no way of knowing that this test is asynchronous, using the async keyword implicitly returns a Promise.

const { screen } = require('@testing-library/dom');

test('DOM', () => {
  return screen.findByRole('aaaaa')
    .then(() => {
      console.log('found');
    })
    .catch(() => {
      console.log('not found');
    });
});