Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

New Rule Proposal: no-unsettled-absence-query

Aperta
  • Qualcosa non va?
#1,237 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@JMiltier ci sta già lavorando.

Dal 31/3/2026.

  • #1278 di @JMiltier — aperta

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
35/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
eslint, javascript, typescript
Ambito
testing-qa, tooling

Direzione di ricerca

Non vengono indicati file del repository, test o punti di ingresso. Inizia esaminando le regole Testing Library ESLint esistenti e i relativi test, quindi confronta gli esempi proposti che falliscono e che passano. Il lavoro è completo quando il nuovo avviso rileva in modo coerente le asserzioni di assenza non stabilizzate, consentendo al contempo le espressioni di stabilizzazione documentate.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

enhancement
Name for new rule

no-unsettled-absence-query

Description of the new rule

Asserting absence with queryBy* + .not.toBeInTheDocument() immediately after render(), before the component has settled, can produce a false positive. The element isn't there yet, not because it won't be there. The community calls this Testing Ghosts.

Testing Library's render() does flush the initial synchronous render (it's wrapped in act() internally), so for a plain component with no async behavior, checking absence right after render() is technically correct. The problem shows up when the component has async side effects like data fetching, lazy loading, state updates from useEffect, etc. In those cases the UI hasn't finished updating, and the absence check passes vacuously. Since the rule can't know whether a component has async behavior, it flags all unsettled absence assertions and lets the developer confirm intent by adding a settling expression.

This rule would enforce that an absence assertion (expect(screen.queryBy*(...)).not.toBeInTheDocument() / .not.toBeVisible()) must be preceded by a "settling" expression within the test body.

Why existing rules don't cover this:

Existing Rule Why it doesn't solve this
prefer-presence-queries Enforces correct query type, but doesn't track timing relative to render
no-await-sync-queries Only flags await directly on sync queries, not timing of assertions
await-async-queries / await-async-utils About promise handling, not assertion ordering
prefer-find-by Simplifies waitFor + getBy -> findBy, doesn't detect premature absence checks

Related issues: #269, #411, #518 - all adjacent but none address this specific pattern.

Testing Library feature

This rule relates to the absence/presence assertion pattern described in the Appearance and Disappearance guide. Specifically, it enforces correct ordering of queryBy* absence assertions relative to async settling utilities (findBy*, waitFor, act) and sync settling queries (getBy*).

Testing Library framework(s)

All frameworks: React, Angular, Vue, Svelte, etc. The pattern applies anywhere screen.queryBy* + .not.toBeInTheDocument() is used.

What category of rule is this?

Warns about a potential error. Less valuable as an error given the call-out above of vanilla components.

Code examples

Fail:

// Absence assertion before component has settled, "Testing a Ghost"
test('shows no error', () => {
  render(<AsyncComponent />);
  expect(screen.queryByText('error')).not.toBeInTheDocument();
});

// Absence assertion BEFORE the awai, order matters
test('shows no error', async () => {
  render(<AsyncComponent />);
  expect(screen.queryByText('error')).not.toBeInTheDocument();
  await screen.findByText('loaded');
});

// queryAllBy variant
test('shows no alerts', () => {
  render(<AsyncComponent />);
  expect(screen.queryAllByRole('alert')).not.toBeInTheDocument();
});

// Absence assertion inside waitFor - passes on first retry, still a ghost
test('shows no error', async () => {
  render(<AsyncComponent />);
  await waitFor(() => {
    expect(screen.queryByText('error')).not.toBeInTheDocument();
  });
});

Pass:

// findBy* settles the component first
test('shows no error', async () => {
  render(<AsyncComponent />);
  await screen.findByText('loaded');
  expect(screen.queryByText('error')).not.toBeInTheDocument();
});

// waitFor settles the component first
test('shows no error', async () => {
  render(<AsyncComponent />);
  await waitFor(() => expect(something).toBe(true));
  expect(screen.queryByRole('alert')).not.toBeInTheDocument();
});

// act settles the component first
test('shows no error', async () => {
  await act(() => render(<AsyncComponent />));
  expect(screen.queryByText('error')).not.toBeInTheDocument();
});

// getBy* proves sync render completed
test('shows no error', () => {
  render(<Component />);
  screen.getByText('visible heading');
  expect(screen.queryByText('error')).not.toBeInTheDocument();
});

What counts as "settled":

  1. Any await expression on a preceding statement — covers findBy*, waitFor, act, custom async helpers
  2. A screen.getBy* / screen.getAllBy* call — proves the sync render produced expected output

Matchers checked: .not.toBeInTheDocument(), .not.toBeVisible()

Anything else?

References:

Do you want to submit a pull request to make the new rule?

I have a working implementation with full test coverage that I'm happy to submit as a PR if this proposal is accepted.

Lingua principale
TypeScript
Stelle
1.1k
Fork
167
Merge medio
16h 56m
PR unite (30g)
5

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di testing-library/eslint-plugin-testing-library

Tutte le issue di testing-library/eslint-plugin-testing-library

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.