Migrate to @testing-library/react-native

[mgcrea]

Summary:

Migrate to @testing-library/react-native since react-test-renderer is deprecated

Changelog:

GENERAL CHANGED - Migrate to @testing-library/react-native

Test Plan:

[mdjastrzebski]

👋 As a maintainer of the @testing-library/react-native (RNTL) package, I'd like to provide some insights. Although the React Test Renderer is deprecated and won't receive further updates, it still functions correctly with React 18.3 and React 19, despite the deprecation warnings.

Currently, RNTL v12 (current stable version) and the upcoming RNTL v13 (expected in Q4 2024) will continue to use React Test Renderer as a peer dependency. If you can add @testing-library/react-native to your dev deps without explicitly adding react-test-renderer, it's only because your package manager resolves it automatically. However, this is risky since the React Test Renderer must match your React version exactly.

Looking ahead, RNTL v14 (planned for Q1 2025) will adopt a new custom test renderer that I'm developing, called uniersal-test-renderer. This new renderer is in advanced stage and passes all internal RNTL. I soon plan to release RNTL v14 alpha with it for community testing.

Here's an action plan I would recommend:

1. Switch to RNTL: Update template example test to use RNTL as proposed in the PR, but keep react-test-renderer as a dev dependency, as required by RNTL.
2. Upgrade to RNTL v13: Once RNTL v13 is stable later this year, before the stable release of RN 0.77, upgrade to RNTL v13 to ensure official support for both React 18 and 19.
3. Adopt RNTL v14: When RNTL v14 with the new renderer is released in Q1 next year, switch to it and remove react-test-renderer from template dev dependencies.

[mdjastrzebski]

I'd rather recommend creating jest-setup.ts file and putting the import "@testing-library/react-native/extend-expect" there. With typical RN app users quickly find need to add additional global mocks for popular community libraries.

[mdjastrzebski]

Suggested change

	import { render } from "@testing-library/react-native";
	import { render, screen } from "@testing-library/react-native";

[mdjastrzebski]

Suggested change

	render(<App />);
	render(<App />);
	expect(screen.getByText('Read the docs to discover what to do next')).toBeOnTheScreen();

[mdjastrzebski]

All Jest test should contain some expect assertions. A typical one is that a certain element is rendered on the screen. I've picked a sample text from App.tsx here.

[mdjastrzebski]

This test does not contain async code, so we can safely remove async keyword

Suggested change

	test('renders correctly', async () => {
	test('renders correctly', () => {

[mdjastrzebski]

You should not remove react-test-renderer as it's required by RNTL. If this works, then only through package manager automatically installing react-test-renderer as a peer dep for RNTL. The risk here is that it will pick the wrong version of the package, and react and react-test-renderer versions need to match.