WhoBuilt

Look into the future of React Native Testing Library

Aug 11, 2020· 55 min· 2.4K views·Watch on YouTube

Speaker

Mikhail P., a software developer and team leader at Callstack, explains React Native Testing Library and its direction in conversation with the host on the first episode of Callstack’s React Native podcast.

Why the library was created

React Native Testing Library adapts the Testing Library approach for React Native, using React Test Renderer rather than DOM APIs. Mikhail says the helpers grew out of the difficulty of writing tests with the renderer directly and concerns that Enzyme made it easy to test implementation details. The library aims to help tests reflect how people use an app.

Queries and testing workflows

Mikhail walks through rendering a component, finding elements by text or accessibility labels, and firing events such as changing text or pressing a button. He highlights accessibility labels as a way to test that elements can be found by users of assistive technology. The library also offers query variants: `getBy` throws when nothing matches, `queryBy` returns null, and `findBy` waits for an element to appear.

Unit-style tests and end-to-end tests

Testing Library tests use user-like queries and interactions in an emulated JavaScript environment, without running an emulator. Mikhail describes end-to-end tools such as Detox as useful for checking that the full app works across its systems, while noting that more systems involved can mean more things go wrong. He presents the two approaches as serving different purposes.

Two libraries and a path to compatibility

Mikhail describes React Native Testing Library and the later official Testing Library for React Native as separate implementations with similar APIs. He says their approaches to native mocks and maintenance differ, and that his library aims to keep its layer over React Test Renderer thin. Version 2, released a few weeks before the episode, brought its APIs closer to other Testing Library projects and began addressing the divide, though a migration strategy was still needed.

What changed in version 2

Version 2 added automatic cleanup and aligned wait APIs with Testing Library, including wrapping `waitFor` calls in `act`. It removed shallow rendering and `getByName`, and renamed implementation-detail queries such as `getByType` to `unsafe_getByType`. Mikhail also recommends `findBy` or `waitFor` instead of `flushMicroTasksQueue`.

Takeaways

  • Use queries and interactions that reflect how a person uses the app to reduce tests tied to component internals.
  • Accessibility labels can make elements easier to test and help surface accessibility gaps.
  • Use end-to-end tests to check the whole system, and keep in mind that they involve more potential failure points.
  • Prefer async queries such as `findBy` when waiting for rendered elements, instead of managing timing helpers directly.
  • When upgrading a testing library, check removed or renamed APIs and follow its migration guidance.

Mentioned in this talk

Search inside this talk

What was claimed 7

Related talks