Zawadzki contrasts slow cycles of rebuilding an app and checking it on a device with the faster feedback of running tests. He outlines TDD’s red, green, and refactoring phases: write a failing test, make it pass quickly, then clean up the code.
Going 100% TDD with React Native Testing Library
Speaker
Louis Zawadzki, a developer at Paris-based mobile agency BAM, explains how to apply test-driven development to React Native at React Native EU 2021, hosted by Callstack.
Using Approval Keynote, a Hacker News clone, Zawadzki demonstrates switching from top stories to new stories. He adds mocked API responses and a test that waits for the new titles, then updates the effect to fetch the selected story type. Checking the app reveals an unhandled missing URL, which he fixes and identifies as a case he should have tested.
For a read-state design change, Zawadzki says he uses snapshots sparingly, typically one per page, because they can be hard to understand and maintain. Before coding, he checks which snapshots exist and which should change, then reviews and updates the expected snapshots after adjusting the title style.
Zawadzki adds a test that expects React Native’s Linking API to open an article URL, then implements the call with a check for an undefined URL. He recommends learning refactoring, Jest, and React Native Testing Library first, and starting TDD with features developers already know how to test.
Zawadzki says applying TDD helped him learn his testing tools, treat test files as maintainable code, and cover more features. He also found that making code easier to test often made its architecture easier to understand and change.
Takeaways
- Use short red, green, and refactoring cycles to get faster feedback than repeated device checks.
- Start TDD with features you already know how to test, then learn unfamiliar cases as they arise.
- Mock API responses and test the user-visible result when adding data-fetching behavior.
- Treat snapshot updates as deliberate: know which pages should change and inspect unexpected differences.
- Making code easier to test can also make it easier to understand and maintain.
Mentioned in this talk
Search inside this talk
What was claimed 12
- works atLouis Zawadzki works at BAM
“I ... work for BAM, a Paris-based mobile development agency.”
YouTube Unverified1 source· Talk
- featureDoctor Shotgun: Script created to help developers find available COVID vaccination booking slots
“One of the scripts was called Doctor Shotgun.”
YouTube Unverified1 source· Talk
- featureTDD: Three phases: write a failing test, make it pass with code, and refactor
“It's a development technique from Extreme Programming that can be described in three phases.”
YouTube Unverified1 source· Talk
- featureTDD: Can provide faster feedback than trying a feature on a device
“they can iterate until the test works, which is usually much, much faster than using a device”
YouTube Unverified1 source· Talk
- uses
“Let me introduce the app, Approval Keynote. It's a Hacker News clone.”
YouTube Unverified1 source· Talk
- featureApproval Keynote: Hacker News cloneHacker News clone
“It's a Hacker News clone.”
YouTube Unverified1 source· Talk
- usesApproval Keynote uses Nock
“they use Nock, a handy package for mocking API calls.”
YouTube Unverified1 source· Talk
- uses
“In this test file, we have one test in which we mock the top stories API and the items.”
YouTube Unverified1 source· Talk
- usesLouis Zawadzki uses Linking
“After I press the button, I'm going to expect Linking ... to have had openURL called with the URL of my item.”
YouTube Unverified1 source· Talk
- uses
“You should also know how to use Jest and React Native Testing Library before starting TDD.”
YouTube Unverified1 source· Talk
- usesLouis Zawadzki uses Jest
“You should also know how to use Jest and React Native Testing Library before starting TDD.”
YouTube Unverified1 source· Talk
- featureLouis Zawadzki: Reports that TDD improved his testing-tool knowledge, test coverage, test maintainability, and architecture
“I discovered it was bringing me a lot more than just faster delivery.”
YouTube Unverified1 source· Talk
