import { use } from 'react';
import { render, screen } from '@testing-library/react';
function TestComponent({ promise }: { promise: Promise<unknown> }) {
 use(promise);
 return 'test';
}
test('render', async () => {
 const promise = new Promise((resolve) => {
 setTimeout(resolve, 10);
 });
 render(<TestComponent promise={promise} />);
 await expect(screen.findByText('test')).resolves.toBeInTheDocument();
});

A component suspended inside an `act` scope, but the `act` call was not awaited. When testing React components that depend on asynchronous data, you must await the result:
await act(() => ...)

Caused by: TestingLibraryElementError: Unable to find an element with the text: test. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

import { use } from 'react';
import { act, render, screen } from '@testing-library/react';
function TestComponent({ promise }: { promise: Promise<unknown> }) {
 use(promise);
 return 'test';
}
test('render', async () => {
 const promise = new Promise((resolve) => {
 setTimeout(resolve, 10);
 });
 act(() => {
 render(<TestComponent promise={promise} />);
 });
 await expect(screen.findByText('test')).resolves.toBeInTheDocument();
});

import { use } from 'react';
import { act, render, screen } from '@testing-library/react';
function TestComponent({ promise }: { promise: Promise<unknown> }) {
 use(promise);
 return 'test';
}
test('render', async () => {
 const promise = new Promise((resolve) => {
 setTimeout(resolve, 10);
 });
 await act(() => {
 render(<TestComponent promise={promise} />);
 });
 await expect(screen.findByText('test')).resolves.toBeInTheDocument();
});