Recipe: Testing React Components

Relevant source files

The following files were used as context for generating this wiki page:

• examples/005-race/todolist/main.spec.tsx
• examples/005-race/autocomplete/main.spec.tsx
• examples/005-race/userProfile/main.spec.tsx
• website/blog/2023-05-21-whats-new-in-fast-check-3-9-0/index.md
• website/blog/2023-05-16-fast-check-loves-docusaurus/index.md
• website/src/components/HomepageFeatures/index.js

Introduction

fast-check provides powerful capabilities for testing JavaScript and TypeScript applications, including complex UI components built with React. A key feature is its ability to uncover challenging bugs like race conditions in asynchronous operations, which are common in modern React applications that fetch data or handle user interactions. This is achieved through property-based testing combined with a sophisticated scheduler.

The core of testing React components with fast-check, especially for race conditions, involves using fc.scheduler to control the execution order of promises. This allows fast-check to explore various interleavings of asynchronous events, simulating real-world scenarios that are difficult to reproduce manually. A crucial aspect of this process is the integration with React's act utility to ensure state updates are processed correctly within the test environment. The library offers live playgrounds and tutorials, including one specifically for detecting race conditions, to help users learn these advanced techniques.

Sources: website/blog/2023-05-21-whats-new-in-fast-check-3-9-0/index.md:28-31, website/blog/2023-05-16-fast-check-loves-docusaurus/index.md:100-102, website/src/components/HomepageFeatures/index.js:28-32

The Role of act in React Testing

When testing React components, any code that causes state updates must be wrapped in an act(...) call. This ensures that the test environment behaves closer to how React works in the browser. Failing to do so can result in warnings and unreliable tests, especially when dealing with promises that trigger state changes upon resolution.

The act function is fundamental when testing asynchronous logic with fast-check, as the scheduler will be resolving promises at unpredictable times, which in turn triggers state updates in the component under test. fast-check's scheduler provides mechanisms to integrate act seamlessly into the property-based test execution.

Sources: website/blog/2023-05-21-whats-new-in-fast-check-3-9-0/index.md:34-45

Testing for Race Conditions

The primary method for finding race conditions in React components with fast-check is to use fc.asyncProperty in conjunction with fc.scheduler. This combination allows the test to define a set of asynchronous tasks and let fast-check explore different execution orderings to find potential bugs.

The following diagram illustrates the general workflow for a race condition test.

Sources: examples/005-race/todolist/main.spec.tsx:21-42, examples/005-race/autocomplete/main.spec.tsx:23-45, website/blog/2023-05-21-whats-new-in-fast-check-3-9-0/index.md:80-95

1. Setting up the Scheduler

The test begins by defining an fc.asyncProperty that takes an fc.scheduler as an argument. This scheduler instance (s) will be used to manage all asynchronous operations within the test.

// examples/005-race/userProfile/main.spec.tsx:21-22
it('should display the details of the last user we clicked on', () => {
  fc.assert(fc.asyncProperty(fc.scheduler(), async (s) => {
    // ... test logic
  }));
});

Sources: examples/005-race/userProfile/main.spec.tsx:21-24

2. Scheduling Asynchronous Tasks

Instead of creating native Promises, tasks are scheduled using s.schedule(). This function wraps a promise and gives fast-check control over when it resolves or rejects. This is the key to exploring different execution interleavings.

The example below schedules two promises, each representing an API call to fetch user data.

// examples/005-race/userProfile/main.spec.tsx:26-29
const promiseUser1 = s.schedule(Promise.resolve({ name: 'user-1' }));
const promiseUser2 = s.schedule(Promise.resolve({ name: 'user-2' }));

const api = {
  getUser: (name: string) => (name === 'user-1' ? promiseUser1 : promiseUser2),
};

Sources: examples/005-race/userProfile/main.spec.tsx:26-29

3. Integrating act with the Scheduler

To handle React state updates correctly, the act function must be provided to the scheduler. fast-check offers three granular levels to do this, with the recommendation being to apply it at the wait or scheduling level for better clarity, especially with manual examples.

The following sequence diagram shows how the test, scheduler, act, and React component interact.

Sources: website/blog/2023-05-21-whats-new-in-fast-check-3-9-0/index.md:28-111

act Integration Levels

Level	Description	Example
Scheduling	The act function is passed as the fourth argument to s.schedule(). This is useful for specifying different wrappers for different tasks.	s.schedule(Promise.resolve(1), undefined, undefined, act)
Wait	The act function is passed to s.waitAll(). This applies the same wrapper to all tasks released during the wait.	await s.waitAll(act)
Scheduler	The act function is passed when creating the scheduler: fc.scheduler({ act }). This is the legacy approach and is now less recommended.	fc.scheduler({ act: act })

Sources: website/blog/2023-05-21-whats-new-in-fast-check-3-9-0/index.md:28-111

4. Execution and Assertion

After setting up the component and triggering events, s.waitAll() is called. The scheduler then runs all the scheduled tasks in a specific, property-based order. Once all tasks are complete, the test can assert that the component is in the correct final state.

In the userProfile example, the test asserts that the displayed user is 'user-2', because that was the last button clicked, regardless of the order in which the underlying promises resolved.

// examples/005-race/userProfile/main.spec.tsx:37-41
// Click on user-1 then on user-2
fireEvent.click(getByText('user-1'));
fireEvent.click(getByText('user-2'));

// Wait for all scheduled promises to be resolved
await s.waitAll();

// Check the final status of the component
expect(queryByText('name: user-2')).not.toBe(null);

Sources: examples/005-race/userProfile/main.spec.tsx:37-41

Practical Examples

The repository contains several examples demonstrating this pattern.

Example	Description	Key Logic
UserProfile	A component displays user details. Clicking buttons for different users fetches their data. The test ensures the component always shows the data for the last user clicked, preventing a race condition where an earlier, slower request overwrites a later, faster one.	fireEvent.click triggers API calls. s.waitAll() resolves them in a fast-check-determined order. The assertion checks for the last user's data.
TodoList	A todo list application where items can be added asynchronously. The test checks that if two items are added, both appear in the list, regardless of the order their "add" operations complete.	Two addTodo calls are made, scheduling two promises. s.waitAll() runs them. The assertion checks that getAllByRole('listitem') returns two items.
Autocomplete	An autocomplete input that fetches suggestions. Typing quickly can trigger multiple requests. The test ensures that the suggestions displayed correspond to the latest input value, not an earlier one.	fireEvent.change is called multiple times with different values. The assertion checks that the final displayed suggestions match the last typed query.

Sources: examples/005-race/userProfile/main.spec.tsx, examples/005-race/todolist/main.spec.tsx, examples/005-race/autocomplete/main.spec.tsx

Conclusion

By integrating fc.scheduler with React's act utility, fast-check provides a robust framework for uncovering race conditions and other complex asynchronous bugs in React components. This property-based approach goes beyond traditional unit tests by exploring a vast state space of possible event orderings, thereby increasing confidence in the correctness of the UI logic under various real-world conditions. The ability to define act at different levels of granularity offers developers the flexibility to tailor their tests to specific needs.

Sources: website/blog/2023-05-21-whats-new-in-fast-check-3-9-0/index.md, website/src/components/HomepageFeatures/index.js:28-32