The team added end-to-end tests to RNTester, React Native’s showcase app, to automate checks that release crew members and contributors previously performed by building apps and clicking through them manually. The discussion describes testing two apps across eight configurations, including the old and new architectures and Hermes and JavaScriptCore. Automation lets the team rerun checks after a bug is found instead of repeating hours of manual testing.
Introducing E2E tests to React Native core
Speakers
Mateusz, Callstack’s quality assurance team leader, and Szymon Włodarczyk, a Callstack open-source expert, discuss React Native core’s new end-to-end tests with the host on Callstack’s React Native Show podcast.
The initial framework runs in CircleCI on Android and iOS, with one component test at the time of recording. The plan is to add tests for critical positive and negative paths across the app. The guests stress that RNTester can check components in isolation, but teams still need to test how components behave when wrapped or combined in their own apps.
The team created an `rn-tester-e2e` package and chose Appium with WebdriverIO, using JavaScript tests that run with Jest. The approach treats the app as a black box, so the same tests can run against different React Native configurations without changing application code. Tests build the app and run on emulators or simulators for each commit and pull request; device support was planned for later.
The guests identify test maintenance as a cost: visual changes may require test updates, and failures need investigation. They planned to expand test coverage, support connected real devices and device farms, and explore sequential and screen testing. Detox was ruled out because the team needed physical iOS device and device farm support; Maestro was ruled out because it lacked desktop and device farm support at the time, and used YAML tests.
Takeaways
- Automating repetitive release checks can reduce rerun effort when a defect is found.
- A black-box test suite can be reused across multiple runtime and architecture configurations.
- Component tests in a showcase app do not replace testing components in the context of a product’s own app.
- Budget for maintaining tests and investigating failures alongside writing them.
- Choose an end-to-end testing tool against required platforms and device access, not only ease of authoring.
Mentioned in this talk
Search inside this talk
What was claimed 13
- uses
Meta uses React Native“we've been testing the rollout of them within our own apps, including the flagship Facebook app.”
0:20inThe New React Native: Bringing the Fabric renderer to the “Facebook” appYouTube Verified8 sources· Talk
- role atMateusz is quality assurance team leader at Callstack Team
“Mateusz, our quality assurance team leader.”
YouTube Unverified1 source· Talk
- role atSzymon Włodarczyk is open-source expert at Callstack Team
“Szymon Włodarczyk, our open-source expert.”
YouTube Unverified1 source· Talk
- built
“Callstack was involved in the process to introduce initial end-to-end tests in the React Native tester app.”
YouTube Unverified1 source· Talk
- metricRNTester end-to-end test framework: One component test on Android and iOS
“We have one component test on both Android and iOS.”
YouTube Unverified1 source· Talk
- featureRNTester end-to-end test framework: Runs on every commit and pull request
“The tests run inside the React Native repository on every commit and every pull request.”
YouTube Unverified1 source· Talk
- uses
“The tests must run with Jest.”
YouTube Unverified1 source· Talk
- uses
“For the tech stack, we chose Appium and Webdriver.”
YouTube Unverified1 source· Talk
