Renderizado de componentes con React Native Testing Library

React Native Testing Library (RNTL) is the standard tool for writing component tests in React Native. It lets you render a component in a simulated environment, query the output for elements, and make assertions about what the user would see.

RNTL follows the Testing Library philosophy: test components the way users interact with them — by visible text, accessibility labels, and roles — rather than by internal implementation details like component names or state values. This produces tests that are resilient to refactoring.

Install RNTL and its peer dependency @testing-library/jest-native for extended matchers. The jest-native package adds React Native-specific matchers like toBeVisible() and toHaveTextContent().

Add the setup file to your Jest config so the matchers are available in every test file without manual imports. Import @testing-library/jest-native/extend-expect in the Jest setup file.

The render() function from RNTL mounts a component and returns a set of query utilities for inspecting the rendered output. It takes JSX just like you would write in your app, including any props or wrapping providers needed.

The returned object includes query methods and a debug() function that prints the rendered component tree to the console. Call debug() at any point during a test to see what the component looks like at that moment.

getByText(text) finds an element that displays the exact text string. It throws if no matching element is found (failing the test) or if multiple elements match. Use queryByText when you want to assert the text is not present (it returns null instead of throwing).

You can also pass a regular expression to match partial text: getByText(/Hello/). This is useful when the text includes dynamic values like a username that you do not want to hard-code in the test.

When there is no user-visible text to query by, add a testID prop to the element and query it with getByTestId('testID'). This is useful for icons, images, loading indicators, and container views.

Keep testID values consistent with the component they identify. A naming convention like componentName-element (e.g., profileCard-avatar) makes test IDs self-documenting and prevents collisions across the test suite.

RNTL encourages querying by accessibility attributes because these are what screen readers use, making your tests also verify accessibility. The key accessibility queries are:

• getByRole('button', { name: 'Submit' }) — finds an element by its ARIA role and accessible name
• getByLabelText('Email') — finds an element with a matching accessibilityLabel
• getByPlaceholderText('Enter email') — finds a TextInput by its placeholder

@testing-library/jest-native extends Jest with semantic matchers that are easier to read and more meaningful than checking raw props. Key matchers include:

• toBeVisible() — element is not hidden
• toHaveTextContent('text') — element contains the given text
• toBeDisabled() — button or input is disabled
• toHaveStyle({ color: 'red' }) — element has the specified style

Most real-world components depend on context providers like NavigationContainer, Redux Provider, or custom ThemeContext. If you render a component without its required providers, the test will throw.

Create a custom renderWithProviders utility that wraps components in all the necessary providers. Pass this utility to RNTL's render option via wrapper, or use it as a drop-in replacement for render across your test suite.

Snapshot tests capture the rendered output of a component and save it to a .snap file. On subsequent runs, Jest compares the current output against the saved snapshot and fails the test if they differ. This catches unintentional UI changes.

Use snapshots sparingly. They are great for small, stable components like icons or buttons. For complex screens, snapshot tests tend to be brittle — minor, intentional changes require updating the snapshot with jest --updateSnapshot, making it easy to accidentally accept broken output.

Components often render different UI based on props or state. Test each conditional branch explicitly by rendering the component with different props and asserting that the correct elements are present or absent.

Use queryByText or queryByTestId (which return null instead of throwing) to assert absence. Avoid using getBy queries to assert absence — they throw, which does not produce a clear failure message.

RNTL query functions come in three variants:

• getBy — throws if not found or if multiple matches (use for single, must-exist elements)
• getAllBy — returns an array, throws if none found (use for lists of elements)
• findBy — returns a Promise, waits for the element to appear (use for async content)

The findBy variants are essential when testing components that load data asynchronously — they automatically retry the query until the element appears or a timeout is exceeded.

Test your understanding of React Native Mobile Development concepts from this lesson.

In this lesson you learned: how to render components with RNTL's render() function and query elements by text, testID, and accessibility attributes, how jest-native matchers like toBeVisible() and toHaveTextContent() make assertions more readable, and how to wrap components in providers for tests that require navigation or theme context. Next up we fire user events and test interactive component behavior.