- Learn a mental model for thinking about testing that will give you confidence deciding what and how to test
- Get hands-on experience with some of the most popular React Native testing tools
- Find solutions to common React Native testing obstacles and challenges
1. Testing React Native Apps
As you get settled, write the answer to the following
question on Post-It notes. Write as many answers on
separates notes as you like. When you're done, put them
on the back wall.
What do you want to learn about testing in this workshop?
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
8. Thank you, assistants!
— David Leuiliette
— Jon Major Condon
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
9. Answer the following two questions on Post-It notes.
Then discuss your answers with your group. Choose
someone who will summarize your group's answers to
the whole workshop afterward.
1. What benefits are you currently getting from
testing?
2. What are your testing pain points?
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
23. "A component contract is the agreement between a
component and the rest of the application."
-- Edd Yerburgh, Testing Vue.js Applications
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
24. "Other components can assume the component will
fulfill its contractual agreement and produce the agreed
output if it’s provided the correct input."
-- Edd Yerburgh, Testing Vue.js Applications
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
25. Discuss:
What are some of the kinds
of inputs and outputs that
components have?
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
26. Testing the Contract
Inputs:
— Props
— User interaction events
Outputs:
— Rendered UI
— Calls to function props
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
27. Testing the Contract
Inputs:
— Props
— User interaction events
Outputs:
— Rendered UI
— Calls to function props
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
28. To the code!
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
34. Which Query Should I Use?
callstack.github.io/react-native-testing-library/docs/how-should-i-query
"your test should resemble how users interact with your
code (component, page, etc.) as much as possible"
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
35. Which Query Should I Use?
callstack.github.io/react-native-testing-library/docs/how-should-i-query
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
36. Note on getByRole()
screen.getByRole('button', {name: 'Save Changes'})
— May become the top recommendation soon
— Feature needed first: implicit roles (Pressables
queryable as button by default)
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
68. Question:
Do you think mocks involve
testing implementation
details or not?
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
69. My view:
Mocks are an important
part of testing the contract.
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
70. Testing the Contract
Inputs:
✅
Props
✅
User interaction events
Outputs:
✅
Rendered UI
- Calls to function props
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
71. Testing the Contract
Inputs:
✅
Props
✅
User interaction events
Outputs:
✅
Rendered UI
✅
Calls to function props
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
89. To the code!
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
90. Component Testing
As a group, come up a way to explain what "testing the
contract" of a component means to other developers.
Use the poster in your area. You can write a bulleted list,
use diagrams, draw a picture to use a metaphor, etc.
Feel free to get creative!
After, your group will present your board to the
workshop.
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
93. Choosing an E2E Test
Library
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
94. — Runs on Hardware
— Runs on Sauce Labs and AWS
Device Farm
— Runs completely outside your
app
— Have to use multiple libraries
together
— Hard to find complete
documentation
— Tests tend to be flaky
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
95. Detox
— Write tests in JavaScript or
TypeScript
— Has inside knowledge of your
app
— Expo not officially supported
— Can be complex to set up
— Does not run on physical iOS
devices yet
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
96. Maestro
— Easy setup, a single library
— Runs completely outside your
app
— Maestro Studio to
interactively write commands
— New; rough edges
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
97. To the code!
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
116. What's a fake?
A version of the service that acts similar to the real thing
but stores its data in-memory
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
117. To the code!
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
125. Recommendation:
— Automate testing against a fake
— Manually test integration with real service
— If you need to automate testing with real service, do
a small separate test suite
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
126. End-to-End Testing
As a group, pick one of your group members' apps and
come up with a list of the most valuable scenarios you
would end-to-end test. Write each on a Post-It note and
put it on your poster. If there are any you're uncertain
how you would write a test for, discuss them as a group.
Nominate someone to present your scenarios and
questions to the whole workshop.
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
128. How much of each type of
test to do?
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
129. Tradeoffs
— End-to-End Tests: give confidence the whole app
works
— Unit and Component Tests: faster, easier, less flaky
testing of edge cases, influence design of code
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
130. My Recommendations
— End-to-end test main flows only
— Component test edge cases
— Extract plain functions and classes when it makes
sense, and unit test them
— Tweak as you go
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
131. To Discuss
Write the answer to the following question on Post-It
note. Use as many as you need:
Based on what you learned today, what specifically do
you want to do differently testing your React app
going forward?
Afterward we'll go around the room and each share our
answers!
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23
135. Effective Detox Testing
Oct 25, 2023 -Virtual
— CI on GitHub Actions
— Detox local development
workflow
— When Detox vs RNTL vs
manual
— How much to test with Detox
Testing React Native Apps - Josh Justice - Chain React - 2023-05-17 - https://rnte.st/cr23