chore: migrate cookbook

Author: mdjastrzebski

examples/cookbook/app/custom-render/__tests__/index.test.tsx

@@ -3,22 +3,22 @@ import { screen } from '@testing-library/react-native';
 import WelcomeScreen from '../WelcomeScreen';
 import { renderWithProviders } from './test-utils';
 
-test('renders WelcomeScreen in light theme', () => {
-  renderWithProviders(<WelcomeScreen />, { theme: 'light' });
+test('renders WelcomeScreen in light theme', async () => {
+  await renderWithProviders(<WelcomeScreen />, { theme: 'light' });
   expect(screen.getByText('Theme: light')).toBeOnTheScreen();
 });
 
-test('renders WelcomeScreen in dark theme', () => {
-  renderWithProviders(<WelcomeScreen />, { theme: 'dark' });
+test('renders WelcomeScreen in dark theme', async () => {
+  await renderWithProviders(<WelcomeScreen />, { theme: 'dark' });
   expect(screen.getByText('Theme: dark')).toBeOnTheScreen();
 });
 
-test('renders WelcomeScreen with user', () => {
-  renderWithProviders(<WelcomeScreen />, { user: { name: 'Jar-Jar' } });
+test('renders WelcomeScreen with user', async () => {
+  await renderWithProviders(<WelcomeScreen />, { user: { name: 'Jar-Jar' } });
   expect(screen.getByText(/hello Jar-Jar/i)).toBeOnTheScreen();
 });
 
-test('renders WelcomeScreen without user', () => {
-  renderWithProviders(<WelcomeScreen />, { user: null });
+test('renders WelcomeScreen without user', async () => {
+  await renderWithProviders(<WelcomeScreen />, { user: null });
   expect(screen.getByText(/hello stranger/i)).toBeOnTheScreen();
 });

examples/cookbook/app/custom-render/__tests__/test-utils.tsx

@@ -8,11 +8,11 @@ interface RenderWithProvidersProps {
   theme?: Theme;
 }
 
-export function renderWithProviders<T>(
+export async function renderWithProviders<T>(
   ui: React.ReactElement<T>,
   options?: RenderWithProvidersProps,
 ) {
-  return render(
+  return await render(
     <UserProvider.Provider value={options?.user ?? null}>
       <ThemeProvider.Provider value={options?.theme ?? 'light'}>{ui}</ThemeProvider.Provider>
     </UserProvider.Provider>,

examples/cookbook/app/network-requests/__tests__/PhoneBook.test.tsx

@@ -10,9 +10,8 @@ jest.setTimeout(10000);
 
 describe('PhoneBook', () => {
   it('fetches all contacts and favorites successfully and renders lists in sections correctly', async () => {
-    render(<PhoneBook />);
+    await render(<PhoneBook />);
 
-    await waitForElementToBeRemoved(() => screen.getByText(/users data not quite there yet/i));
     expect(await screen.findByText('Name: Mrs Ida Kristensen')).toBeOnTheScreen();
     expect(await screen.findByText('Email: ida.kristensen@example.com')).toBeOnTheScreen();
     expect(await screen.findAllByText(/name/i)).toHaveLength(3);
@@ -22,19 +21,17 @@ describe('PhoneBook', () => {
 
   it('fails to fetch all contacts and renders error message', async () => {
     mockServerFailureForGetAllContacts();
-    render(<PhoneBook />);
+    await render(<PhoneBook />);
 
-    await waitForElementToBeRemoved(() => screen.getByText(/users data not quite there yet/i));
     expect(
       await screen.findByText(/an error occurred: error fetching contacts/i),
     ).toBeOnTheScreen();
   });
 
   it('fails to fetch favorites and renders error message', async () => {
     mockServerFailureForGetAllFavorites();
-    render(<PhoneBook />);
+    await render(<PhoneBook />);
 
-    await waitForElementToBeRemoved(() => screen.getByText(/figuring out your favorites/i));
     expect(await screen.findByText(/error fetching favorites/i)).toBeOnTheScreen();
   });
 });

examples/cookbook/app/state-management/jotai/__tests__/TaskList.test.tsx

@@ -7,15 +7,15 @@ import { renderWithAtoms } from './test-utils';
 
 jest.useFakeTimers();
 
-test('renders an empty task list', () => {
-  render(<TaskList />);
+test('renders an empty task list', async () => {
+  await render(<TaskList />);
   expect(screen.getByText(/no tasks, start by adding one/i)).toBeOnTheScreen();
 });
 
 const INITIAL_TASKS: Task[] = [{ id: '1', title: 'Buy bread' }];
 
 test('renders a to do list with 1 items initially, and adds a new item', async () => {
-  renderWithAtoms(<TaskList />, {
+  await renderWithAtoms(<TaskList />, {
     initialValues: [
       [tasksAtom, INITIAL_TASKS],
       [newTaskTitleAtom, ''],

examples/cookbook/app/state-management/jotai/__tests__/test-utils.tsx

@@ -17,11 +17,11 @@ export interface RenderWithAtomsOptions {
  * @param options - The render options including the initial atom values.
  * @returns The render result from `@testing-library/react-native`.
  */
-export const renderWithAtoms = <T,>(
+export const renderWithAtoms = async <T,>(
   component: React.ReactElement,
   options: RenderWithAtomsOptions,
 ) => {
-  return render(
+  return await render(
     <HydrateAtomsWrapper initialValues={options.initialValues}>{component}</HydrateAtomsWrapper>,
   );
 };

examples/cookbook/basics-tutorial-react-strict-dom/1-basics-rsd.test.tsx

@@ -11,17 +11,17 @@ function Greeting({ name = 'World' }) {
 }
 
 describe('Greeting', () => {
-  it('should render', () => {
+  it('should render', async () => {
     // Arrange
-    render(<Greeting />);
+    await render(<Greeting />);
 
     // Assert
     expect(screen.getByText('Hello, World!')).toBeOnTheScreen();
   });
 
-  it('should render with the correct name', () => {
+  it('should render with the correct name', async () => {
     // Arrange
-    render(<Greeting name="John" />);
+    await render(<Greeting name="John" />);
 
     // Assert
     expect(screen.getByText('Hello, John!')).toBeOnTheScreen();

examples/cookbook/basics-tutorial-react-strict-dom/2.1-query-variants-rsd.test.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { html } from 'react-strict-dom';
 import { render, screen } from '@testing-library/react-native';
 
-test('showcase query variants', () => {
-  render(
+test('showcase query variants', async () => {
+  await render(
     <html.div>
       <html.span>Item 1</html.span>
       <html.span>Item 2</html.span>
@@ -33,7 +33,7 @@ function LazyText({ content }: { content: string }) {
 }
 
 test('showcase async query variants', async () => {
-  render(
+  await render(
     <html.div>
       <LazyText content="Lazy Item 1" />
       <LazyText content="Lazy Item 2" />

examples/cookbook/basics-tutorial-react-strict-dom/2.2-query-predicates-rsd.test.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { html } from 'react-strict-dom';
 import { render, screen } from '@testing-library/react-native';
 
-test('query by semantic role: *ByRole (highly recommended)', () => {
-  render(
+test('query by semantic role: *ByRole (highly recommended)', async () => {
+  await render(
     <html.div>
       <html.h1>Heading Text</html.h1>
 
@@ -28,8 +28,8 @@ test('query by semantic role: *ByRole (highly recommended)', () => {
   // expect(screen.getAllByRole('menuitem')).toHaveLength(2);
 });
 
-test('querying TextInput elements (recommended)', () => {
-  render(
+test('querying TextInput elements (recommended)', async () => {
+  await render(
     <html.div>
       <html.input placeholder="Enter Text..." aria-label="Text Label" defaultValue="Hello" />
     </html.div>,
@@ -45,8 +45,8 @@ test('querying TextInput elements (recommended)', () => {
   expect(screen.getByDisplayValue('Hello')).toBeOnTheScreen();
 });
 
-test('other accessible queries (ok)', () => {
-  render(
+test('other accessible queries (ok)', async () => {
+  await render(
     <html.div>
       <html.span>Text content</html.span>
       <html.div aria-label="ARIA Label" />
@@ -57,8 +57,8 @@ test('other accessible queries (ok)', () => {
   expect(screen.getByLabelText('ARIA Label')).toBeOnTheScreen();
 });
 
-test('escape hatch: *ByTestId (use as a last resort)', () => {
-  render(
+test('escape hatch: *ByTestId (use as a last resort)', async () => {
+  await render(
     <html.div>
       <html.span data-testid="Text 1">Text 1</html.span>
     </html.div>,

examples/cookbook/basics-tutorial-react-strict-dom/3-jest-matchers-rsd.test.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react-native';
 import { html, css } from 'react-strict-dom';
 
-test('showcase: toBeOnTheScreen', () => {
-  render(
+test('showcase: toBeOnTheScreen', async () => {
+  await render(
     <html.div>
       <html.div data-testid="view" />
     </html.div>,
@@ -13,8 +13,8 @@ test('showcase: toBeOnTheScreen', () => {
   expect(screen.queryByTestId('non-existent')).not.toBeOnTheScreen();
 });
 
-test('showcase: toBeIntoHaveTextContentTheDocument', () => {
-  render(
+test('showcase: toBeIntoHaveTextContentTheDocument', async () => {
+  await render(
     <html.div>
       <html.p data-testid="text">Hello World</html.p>
     </html.div>,
@@ -25,8 +25,8 @@ test('showcase: toBeIntoHaveTextContentTheDocument', () => {
   expect(screen.getByTestId('text')).toHaveTextContent('Hello', { exact: false });
 });
 
-test('showcase: toContainElement', () => {
-  render(
+test('showcase: toContainElement', async () => {
+  await render(
     <html.div>
       <html.div data-testid="outer">
         <html.div data-testid="inner" />
@@ -39,8 +39,8 @@ test('showcase: toContainElement', () => {
   expect(screen.getByTestId('outer')).not.toContainElement(screen.getByTestId('outer-2'));
 });
 
-test('showcase: toBeEmptyElement', () => {
-  render(
+test('showcase: toBeEmptyElement', async () => {
+  await render(
     <html.div>
       <html.div data-testid="empty" />
       <html.div data-testid="not-empty">
@@ -53,8 +53,8 @@ test('showcase: toBeEmptyElement', () => {
   expect(screen.getByTestId('not-empty')).not.toBeEmptyElement();
 });
 
-test('showcase: toHaveDisplayValue', () => {
-  render(
+test('showcase: toHaveDisplayValue', async () => {
+  await render(
     <html.div>
       <html.input data-testid="input" value="Hello" />
     </html.div>,
@@ -63,8 +63,8 @@ test('showcase: toHaveDisplayValue', () => {
   expect(screen.getByTestId('input')).toHaveDisplayValue('Hello');
 });
 
-test('showcase: toHaveAccessibilityValue', () => {
-  render(
+test('showcase: toHaveAccessibilityValue', async () => {
+  await render(
     <html.div>
       <html.div
         data-testid="view"
@@ -81,8 +81,8 @@ test('showcase: toHaveAccessibilityValue', () => {
   expect(screen.getByTestId('view')).toHaveAccessibilityValue({ now: 33, min: 0, max: 100 });
 });
 
-test('showcase: toBeEnabled/toBeDisabled', () => {
-  render(
+test('showcase: toBeEnabled/toBeDisabled', async () => {
+  await render(
     <html.div>
       <html.div data-testid="enabled" aria-disabled={false} />
       <html.div data-testid="disabled" aria-disabled />
@@ -95,8 +95,8 @@ test('showcase: toBeEnabled/toBeDisabled', () => {
   expect(screen.getByTestId('disabled')).not.toBeEnabled();
 });
 
-test('showcase: toBeSelected', () => {
-  render(
+test('showcase: toBeSelected', async () => {
+  await render(
     <html.div>
       <html.div data-testid="selected" aria-selected />
       <html.div data-testid="not-selected" />
@@ -107,8 +107,8 @@ test('showcase: toBeSelected', () => {
   expect(screen.getByTestId('not-selected')).not.toBeSelected();
 });
 
-test('showcase: toBeBusy', () => {
-  render(
+test('showcase: toBeBusy', async () => {
+  await render(
     <html.div>
       <html.div data-testid="busy" aria-busy />
       <html.div data-testid="not-busy" />
@@ -119,8 +119,8 @@ test('showcase: toBeBusy', () => {
   expect(screen.getByTestId('not-busy')).not.toBeBusy();
 });
 
-test('showcase: toBeExpanded/toBeCollapsed', () => {
-  render(
+test('showcase: toBeExpanded/toBeCollapsed', async () => {
+  await render(
     <html.div>
       <html.div data-testid="expanded" aria-expanded />
       <html.div data-testid="collapsed" aria-expanded={false} />
@@ -138,8 +138,8 @@ test('showcase: toBeExpanded/toBeCollapsed', () => {
   expect(screen.getByTestId('default')).not.toBeExpanded();
 });
 
-test('showcase: toBeVisible', () => {
-  render(
+test('showcase: toBeVisible', async () => {
+  await render(
     <html.div>
       <html.div data-testid="visible" />
       <html.div data-testid="not-visible" style={styles.opacityZero} />
@@ -150,8 +150,8 @@ test('showcase: toBeVisible', () => {
   expect(screen.getByTestId('not-visible')).not.toBeVisible();
 });
 
-test('showcase: toHaveStyle', () => {
-  render(
+test('showcase: toHaveStyle', async () => {
+  await render(
     <html.div>
       <html.span data-testid="text" style={styles.fontSize16}>
         Hello World
@@ -163,8 +163,8 @@ test('showcase: toHaveStyle', () => {
   expect(screen.getByTestId('text')).not.toHaveStyle({ fontSize: 12 });
 });
 
-test('showcase: toHaveProp', () => {
-  render(
+test('showcase: toHaveProp', async () => {
+  await render(
     <html.div>
       <html.p data-testid="text" aria-label="Hello World" />
     </html.div>,

examples/cookbook/basics-tutorial-react-strict-dom/4-events-rsd.test.tsx

@@ -64,7 +64,7 @@ test('Counter should increment the count when the button is pressed', async () =
   const user = userEvent.setup();
 
   // Render the component
-  render(<Counter />);
+  await render(<Counter />);
 
   // Verify initial state
   expect(screen.getByText('0')).toBeOnTheScreen();
@@ -150,7 +150,7 @@ function LoginForm() {
  */
 test('should login with valid credentials', async () => {
   const user = userEvent.setup();
-  render(<LoginForm />);
+  await render(<LoginForm />);
 
   // Simulate typing in the email field
   await user.type(screen.getByPlaceholderText('Email'), 'test@test.com');
@@ -181,7 +181,7 @@ test('should login with valid credentials', async () => {
  */
 test('should show error message with invalid credentials', async () => {
   const user = userEvent.setup();
-  render(<LoginForm />);
+  await render(<LoginForm />);
 
   // Enter valid email but invalid password
   await user.type(screen.getByPlaceholderText('Email'), 'test@test.com');