</>SkillRecallRECALL WHAT YOU KNOW
Explore Library
ReactTesting

15 items

1

Integration Test Async Bug

Code Quiz
2

Testing Trophy Trade-offs

Quiz
3

The Testing Trophy Explained

Slides / Video
4

The Testing Trophy Trade-offs

Flashcard
5

Mocking Fetch and Async Assertions

Code Quiz
6

Async Assertions After Mocked Fetch

Quiz
7

Testing a click with user-event

Code Quiz
8

RTL Query Priority Best Practice

Quiz
9

Mocking APIs & Async Assertions

Slides / Video
10

Mocking APIs & Async Assertions

Flashcard
11

Component Testing with React Testing Library

Slides / Video
12

Component Testing with React Testing Library

Flashcard
13

Advanced React Testing & Profiling

Slides / Video
14

Async State Updates in React Testing Library

Quiz
15

Testing Async & Profiling Renders

Flashcard
Code Quiz

Integration Test Async Bug

A React Testing Library integration test misses an async boundary, causing a false pass or flaky failure.

Codejavascript
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import UserProfile from './UserProfile';

test('loads and displays the user name after fetch', () => {
  render(<UserProfile userId="42" />);

  // Click the button that triggers the async fetch
  userEvent.click(screen.getByRole('button', { name: /load/i }));

  // Assert the fetched name is shown
  expect(screen.getByText('Ada Lovelace')).toBeInTheDocument();
});

This integration test is unreliable. What is the bug and how should it be fixed?