Skip to content
tezvyn:
Menu

React Native Testing Library: Test User Behavior, Not Code

Source: testing-library.comMediumHow cards are made

React Native Testing Library tests components from a user's perspective. Instead of checking internal code, you find elements by visible text and simulate presses, ensuring tests survive refactors. The footgun is overusing implementation details like testID.

Why it exists

Tests that are tightly coupled to a component's internal structure are brittle. They break every time you refactor the code, even if the user-facing functionality is unchanged. This creates constant maintenance work and reduces confidence in your test suite, which is the exact problem React Native Testing Library (RNTL) was built to solve.

The mental model

The more your tests resemble the way your software is used, the more confidence they can give you. Instead of checking a component's internal state or props, your tests should find elements by what a user sees (text, accessibility labels) and simulate user actions (presses, scrolls). This verifies the actual user experience, not just the code structure.

How it works

RNTL provides a set of light utility functions on top of react-test-renderer. It gives you queries like getByText or findByRole to find components and fireEvent to interact with them. Unlike web-based testing libraries that use the DOM, RNTL has its own query engine built specifically for the React Native environment.

When to use it

Use RNTL for component and integration testing in React Native projects. It's perfect for verifying that individual components render correctly and that user interactions trigger the expected outcomes, such as a button press showing a new element. It is most commonly used with the Jest test runner.

When not to use it

RNTL is not for end-to-end (E2E) tests that run on a real device or simulator; for that, use a tool like Detox or Maestro. It is also not for testing pure business logic (e.g., a utility function with no UI), where a standard test runner like Jest is sufficient on its own.

One canonical example

To test a login button, a bad test would check if a <Button> component has a specific onPress prop. A good RNTL test would find the button by its visible text using getByText('Log In'), simulate a press with fireEvent.press(), and then assert that the application state has changed as a user would expect, like seeing a loading spinner appear.

Interview question

Which approach best reflects the core philosophy of React Native Testing Library?

  • a.Testing pure business logic in utility functions without any UI.
  • b.Finding elements by their visible text or accessibility labels and simulating user interactions.Correct
  • c.Locating UI elements using their unique testID props.
  • d.Asserting changes in a component's internal state or props.
Why?

RNTL's core philosophy is to test from a user's perspective, meaning tests should find elements by what a user sees (like text) and simulate user actions. Option C, while possible, is considered a 'footgun' as it ties tests to implementation details, and Option D directly contradicts RNTL's mental model.

Just read this? Test yourself on what you have been reading.

Read the original → testing-library.com

Put your scrolling time to good use

Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.

The iPhone app is on the way

We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.

Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.

Get it on Google PlayiPhone app coming soon

We are hiring for this. Open roles that interview on react-native — each one lists the topics its interview covers.

See open roles