Merge branch 'main' into v13

# Conflicts:
#	package.json
#	src/__tests__/__snapshots__/render-debug.test.tsx.snap
#	yarn.lock

Author: mdjastrzebski

.eslintignore

@@ -1,3 +1,6 @@
 flow-typed/
 build/
 experiments-rtl/
+website/
+
+jest-setup.ts

.eslintrc

@@ -1,7 +1,6 @@
 {
   "extends": "@callstack",
   "rules": {
-    "flowtype/no-weak-types": 0,
     "react-native/no-raw-text": 0,
     "no-console": 1,
     "react/no-multi-comp": 0,

CONTRIBUTING.md

@@ -32,9 +32,9 @@ Our pre-commit hooks verify that your commit message matches this format when co
 
 ### Linting and tests
 
-We use `flow` for type checking, `eslint` with `prettier` for linting and formatting the code, and `jest` for testing. Our pre-commit hooks verify that the linter and tests pass when committing. You can also run the following commands manually:
+We use TypeScript for type checking, `eslint` with `prettier` for linting and formatting the code, and `jest` for testing. Our pre-commit hooks verify that the linter and tests pass when committing. You can also run the following commands manually:
 
-- `yarn flow`: run flow on all files.
+- `yarn typecheck`: run TypeScript compiler on all files.
 - `yarn lint`: run eslint and prettier.
 - `yarn test`: run tests.
 
@@ -43,7 +43,7 @@ We use `flow` for type checking, `eslint` with `prettier` for linting and format
 When you're sending a pull request:
 
 - Prefer small pull requests focused on one change.
-- Verify that `flow`, `eslint` and tests are passing.
+- Verify that `typecheck`, `eslint` and tests are passing.
 - Preview the documentation to make sure it looks good.
 - Follow the pull request template when opening a pull request.
 

babel.config.js

@@ -14,8 +14,7 @@ module.exports = {
   ],
   env: {
     test: {
-      // https://github.com/react-native-community/upgrade-support/issues/152
-      plugins: ['@babel/plugin-transform-flow-strip-types'],
+      presets: ['@react-native/babel-preset'],
     },
   },
 };

examples/basic/components/AnimatedView.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Animated, ViewStyle } from 'react-native';
+
+type AnimatedViewProps = {
+  fadeInDuration?: number;
+  style?: ViewStyle;
+  children: React.ReactNode;
+  useNativeDriver?: boolean;
+};
+
+export function AnimatedView(props: AnimatedViewProps) {
+  const fadeAnim = React.useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
+
+  React.useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: props.fadeInDuration ?? 250,
+      useNativeDriver: props.useNativeDriver ?? true,
+    }).start();
+  }, [fadeAnim]);
+
+  return (
+    <Animated.View
+      style={{
+        ...props.style,
+        opacity: fadeAnim,
+      }}
+    >
+      {props.children}
+    </Animated.View>
+  );
+}

examples/basic/components/__tests__/AnimatedView.test.tsx

@@ -0,0 +1,36 @@
+import { act, render, screen } from '@testing-library/react-native';
+import { AnimatedView } from '../AnimatedView';
+
+describe('AnimatedView', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('should use native driver when useNativeDriver is true', async () => {
+    render(
+      <AnimatedView fadeInDuration={250} useNativeDriver={true}>
+        Test
+      </AnimatedView>,
+    );
+    expect(screen.root).toHaveStyle({ opacity: 0 });
+
+    await act(() => jest.advanceTimersByTime(250));
+    expect(screen.root).toHaveStyle({ opacity: 1 });
+  });
+
+  it('should not use native driver when useNativeDriver is false', async () => {
+    render(
+      <AnimatedView fadeInDuration={250} useNativeDriver={false}>
+        Test
+      </AnimatedView>,
+    );
+    expect(screen.root).toHaveStyle({ opacity: 0 });
+
+    await act(() => jest.advanceTimersByTime(250));
+    expect(screen.root).toHaveStyle({ opacity: 1 });
+  });
+});

examples/cookbook/README.md

@@ -1,10 +1,30 @@
-# RNTL Cookbook
+<p align="center">
+  <img alt="banner" src="assets/readme/banner.png" />
+</p>
 
-This example app gathers recipes from
-the [RNTL Cookbook](https://callstack.github.io/react-native-testing-library/cookbook).
+# React Native Testing Library Cookbook App
+Welcome to the React Native Testing Library (RNTL) Cookbook! This app is designed to provide developers with a collection of best practices, ready-made recipes, and tips & tricks to help you effectively test your React Native applications. Whether you’re just starting out with testing or looking to deepen your skills, this cookbook offers something for everyone.
 
 Each recipe described in the Cookbook should have a corresponding code example screen in this repo.
 
 Note:
 Since examples will showcase usage of different dependencies, the dependencies in `package.json`
 file will grow much larger that in a normal React Native. This is fine 🐶☕️🔥.
+
+## Running the App
+1. Clone the repo `git clone [email protected]:callstack/react-native-testing-library.git`
+2. Go to the `examples/cookbook` directory `cd examples/cookbook`
+3. Install dependencies `yarn`
+4. Run the app `yarn start`
+5. Run the app either on iOS or Android by clicking on `i` or `a` in the terminal.
+
+## How to Contribute
+We invite all developers, from beginners to experts, to contribute your own recipes! If you have a clever solution, best practice, or useful tip, we encourage you to:
+
+1. Submit a Pull Request with your recipe.
+2. Join the conversation on GitHub [here](https://github.com/callstack/react-native-testing-library/issues/1624) to discuss ideas, ask questions, or provide feedback.
+
+## Screenshots From the App
+| Home Screen                                           | Phonebook with Net. Req. Example                                |
+|-------------------------------------------------------|-----------------------------------------------------------------|
+| ![home-screenshot](assets/readme/home-screenshot.png) | ![phonebook-screenshot](assets/readme/phonebook-screenshot.png) |

examples/cookbook/app/index.tsx

@@ -82,6 +82,7 @@ type Recipe = {
 };
 
 const recipes: Recipe[] = [
-  { id: 2, title: 'Welcome Screen with Custom Render', path: 'custom-render/' },
-  { id: 1, title: 'Task List with Jotai', path: 'jotai/' },
+  { id: 1, title: 'Welcome Screen with Custom Render', path: 'custom-render/' },
+  { id: 2, title: 'Task List with Jotai', path: 'state-management/jotai/' },
+  { id: 3, title: 'Phone book with\na Variety of Net. Req. Methods', path: 'network-requests/' },
 ];

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

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react';
+import { Text } from 'react-native';
+import { User } from './types';
+import ContactsList from './components/ContactsList';
+import FavoritesList from './components/FavoritesList';
+import getAllContacts from './api/getAllContacts';
+import getAllFavorites from './api/getAllFavorites';
+
+export default () => {
+  const [usersData, setUsersData] = useState<User[]>([]);
+  const [favoritesData, setFavoritesData] = useState<User[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const _getAllContacts = async () => {
+      const _data = await getAllContacts();
+      setUsersData(_data);
+    };
+    const _getAllFavorites = async () => {
+      const _data = await getAllFavorites();
+      setFavoritesData(_data);
+    };
+
+    const run = async () => {
+      try {
+        await Promise.all([_getAllContacts(), _getAllFavorites()]);
+      } catch (e) {
+        const message = isErrorWithMessage(e) ? e.message : 'Something went wrong';
+        setError(message);
+      }
+    };
+
+    void run();
+  }, []);
+
+  if (error) {
+    return <Text>An error occurred: {error}</Text>;
+  }
+
+  return (
+    <>
+      <FavoritesList users={favoritesData} />
+      <ContactsList users={usersData} />
+    </>
+  );
+};
+
+const isErrorWithMessage = (
+  e: unknown,
+): e is {
+  message: string;
+} => typeof e === 'object' && e !== null && 'message' in e;

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

@@ -0,0 +1,40 @@
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/react-native';
+import React from 'react';
+import PhoneBook from '../PhoneBook';
+import {
+  mockServerFailureForGetAllContacts,
+  mockServerFailureForGetAllFavorites,
+} from './test-utils';
+
+jest.setTimeout(10000);
+
+describe('PhoneBook', () => {
+  it('fetches all contacts and favorites successfully and renders lists in sections correctly', async () => {
+    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: [email protected]')).toBeOnTheScreen();
+    expect(await screen.findAllByText(/name/i)).toHaveLength(3);
+    expect(await screen.findByText(/my favorites/i)).toBeOnTheScreen();
+    expect(await screen.findAllByLabelText('favorite-contact-avatar')).toHaveLength(3);
+  });
+
+  it('fails to fetch all contacts and renders error message', async () => {
+    mockServerFailureForGetAllContacts();
+    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 waitForElementToBeRemoved(() => screen.getByText(/figuring out your favorites/i));
+    expect(await screen.findByText(/error fetching favorites/i)).toBeOnTheScreen();
+  });
+});

examples/cookbook/app/network-requests/__tests__/test-utils.ts

@@ -0,0 +1,109 @@
+import { User } from '../types';
+import {http, HttpResponse} from "msw";
+import {setupServer} from "msw/node";
+
+// Define request handlers and response resolvers for random user API.
+// By default, we always return the happy path response.
+const handlers = [
+  http.get('https://randomuser.me/api/*', () => {
+    return HttpResponse.json(DATA);
+  }),
+];
+
+export const server = setupServer(...handlers);
+
+export const mockServerFailureForGetAllContacts = () => {
+  server.use(
+    http.get('https://randomuser.me/api/', ({ request }) => {
+      // Construct a URL instance out of the intercepted request.
+      const url = new URL(request.url);
+      // Read the "results" URL query parameter using the "URLSearchParams" API.
+      const resultsLength = url.searchParams.get('results');
+      // Simulate a server error for the get all contacts request.
+      // We check if the "results" query parameter is set to "25"
+      // to know it's the correct request to mock, in our case get all contacts.
+      if (resultsLength === '25') {
+        return new HttpResponse(null, { status: 500 });
+      }
+
+      return HttpResponse.json(DATA);
+    }),
+  );
+};
+
+export const mockServerFailureForGetAllFavorites = () => {
+  server.use(
+    http.get('https://randomuser.me/api/', ({ request }) => {
+      // Construct a URL instance out of the intercepted request.
+      const url = new URL(request.url);
+      // Read the "results" URL query parameter using the "URLSearchParams" API.
+      const resultsLength = url.searchParams.get('results');
+      // Simulate a server error for the get all favorites request.
+      // We check if the "results" query parameter is set to "10"
+      // to know it's the correct request to mock, in our case get all favorites.
+      if (resultsLength === '10') {
+        return new HttpResponse(null, { status: 500 });
+      }
+
+      return HttpResponse.json(DATA);
+    }),
+  );
+};
+export const DATA: { results: User[] } = {
+  results: [
+    {
+      name: {
+        title: 'Mrs',
+        first: 'Ida',
+        last: 'Kristensen',
+      },
+      email: '[email protected]',
+      id: {
+        name: 'CPR',
+        value: '250562-5730',
+      },
+      picture: {
+        large: 'https://randomuser.me/api/portraits/women/26.jpg',
+        medium: 'https://randomuser.me/api/portraits/med/women/26.jpg',
+        thumbnail: 'https://randomuser.me/api/portraits/thumb/women/26.jpg',
+      },
+      cell: '123-4567-890',
+    },
+    {
+      name: {
+        title: 'Mr',
+        first: 'Elijah',
+        last: 'Ellis',
+      },
+      email: '[email protected]',
+      id: {
+        name: 'TFN',
+        value: '138117486',
+      },
+      picture: {
+        large: 'https://randomuser.me/api/portraits/men/53.jpg',
+        medium: 'https://randomuser.me/api/portraits/med/men/53.jpg',
+        thumbnail: 'https://randomuser.me/api/portraits/thumb/men/53.jpg',
+      },
+      cell: '123-4567-890',
+    },
+    {
+      name: {
+        title: 'Mr',
+        first: 'Miro',
+        last: 'Halko',
+      },
+      email: '[email protected]',
+      id: {
+        name: 'HETU',
+        value: 'NaNNA945undefined',
+      },
+      picture: {
+        large: 'https://randomuser.me/api/portraits/men/17.jpg',
+        medium: 'https://randomuser.me/api/portraits/med/men/17.jpg',
+        thumbnail: 'https://randomuser.me/api/portraits/thumb/men/17.jpg',
+      },
+      cell: '123-4567-890',
+    },
+  ],
+};

examples/cookbook/app/network-requests/api/getAllContacts.ts

@@ -0,0 +1,10 @@
+import { User } from '../types';
+
+export default async (): Promise<User[]> => {
+  const res = await fetch('https://randomuser.me/api/?results=25');
+  if (!res.ok) {
+    throw new Error(`Error fetching contacts`);
+  }
+  const json = await res.json();
+  return json.results;
+};

examples/cookbook/app/network-requests/api/getAllFavorites.ts

@@ -0,0 +1,10 @@
+import { User } from '../types';
+
+export default async (): Promise<User[]> => {
+  const res = await fetch('https://randomuser.me/api/?results=10');
+  if (!res.ok) {
+    throw new Error(`Error fetching favorites`);
+  }
+  const json = await res.json();
+  return json.results;
+};