So you’ve gotten Detox set up to test your React Native application. Good work! But you aren’t done yet: there are still a lot of questions you need to answer. How many tests do you write? When and where do you run them? How do you ensure there is test data available? What do you do about parts of your app that use mobile APIs that are difficult to automate? You could sink a lot of effort into these things—is the payoff worth it?
In this three-hour workshop we’ll address these questions by discussing how to integrate Detox into your development workflow. You’ll walk away with the skills and information you need to make Detox testing a natural and productive part of day-to-day development.
-
We'll cover:
- Deciding what to test with Detox vs React Native Testing Library vs manual testing
- Setting up a fake API layer for testing
- Getting Detox running on CI on GitHub Actions for free
- Deciding how much of your app to test with Detox: a sliding scale
- Fitting Detox into you local development workflow
2. Overview
1. What kinds of things to test with Detox
2. Faking the API layer
3. How much of your app to test with Detox
4. Detox on CI
5. Local Detox development workflow
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
3. Prerequisites
— Experience with React Native
— Experience with Detox
— Experience with different types of tests: unit,
component, end-to-end
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
8. 1. What kinds of things to
test with Detox
…vs. what kinds of things to test
with other tools
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
18. Realism like…
— Get a push notification
— OS alert prompts you to apply an OS update
— Network connection drops
— Virtual keyboard appears/disappears when you don't
expect
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
19. A less-realistic, stable test
gives you more confidence than
a realistic, flaky test.
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
20. A less-realistic test you run
all the time
gives you more confidence than
a realistic test you don't run
because it's slow.
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
23. End-to-End Testing
— Integration of first-party and
third-party JS and native code
— Can the user do what they
want to do?
— Can the app make money?
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
26. The more realistic the test,
the more effort it is to write
and maintain it.
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
39. What's a fake?
A version of the service that acts similar to the real thing
but stores its data in-memory
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
40. To the code!
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
44. Configure metro.config.js
— When flag is set, prefer .mock.js extension when
present
— Exact code may differ if you've modified
metro.config.js for other reasons
— E.g. using react-native-svg-transformer
— See reactnativetesting.io/e2e/external-services
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
54. 4. Detox on CI
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
55. CI for native mobile apps is
hard
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
56. 1. Variations between CI
Platforms
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
57. 2. Dependent on details of
specific versions
On GitHub Actions, Detox works for me on macos-12
and times out on macos-13
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
59. 4. Expensive if you pay by the
hour
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
60. 5. If you have a suite that passes
on developer machines, it's hard
to get it all passing on CI at once
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
61. My GitHub Actions Detox
CI Setup
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
62. To the YAML!
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
69. Recommendation
— Pick your potential CI platform
— Try to get a boot test passing on CI
— If it doesn't work, try another platform
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
70. 5. Local Detox development
workflow
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
75. Getting Better All
the Time: How to
Escape Bad Code
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
77. Why TDD?
— Thorough test coverage.
— Code that is easy to test.
— Minimal code.
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
78. 3 Stages
1. Test some existing features
2. Test new features as you add them
3. Test-driven development
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
80. What We Covered
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
81. 1. What kinds of things to test with Detox
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
82. 1. What kinds of things to test with Detox
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
83. 2. Faking the API layer
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
84. 3. How much to test with Detox
— Boot test
— Play-around test
— The most important moneymaking feature, happy
path flow
— Secondary feature happy paths
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
85. 4. Detox on CI
GitHub Actions example config
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
86. 5. Stages of Detox development
1. Test some existing features
2. Test new features as you add them
3. Test-driven development
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23
87. What We Covered
1. What kinds of things to test with Detox
2. Faking the API layer
3. How much of your app to test with Detox
4. Detox on CI
5. Local Detox development workflow
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23