Effective Detox Testing - React Advanced 2023

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

1. Effective Detox Testing
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

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

4. Josh Justice
CodingItWrong.com
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

5. ReactNativeTesting.io
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

6. Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

7. https://rnte.st/london23
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

9. Kinds of Testing
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

10. Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

11. Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

12. Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

13. Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

14. Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

15. Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

16. "Testing is all about
confidence."
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

17. Realism != Confidence
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

21. Testing Goals
—Realism
—Speed
—Reliability
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

22. Manual Testing
—Animation smoothness
—User experience
—Integration with third-party
services
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

24. Component Testing
—Fully cover logical branches in
UI code
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

25. Unit Testing
—Fully cover logical branches in
non-UI code
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

27. Test Pyramid
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

28. Test Pyramid
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

29. Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

30. Questions?
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

31. 2. Faking the API Layer
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

32. Connecting to the real backend:
Upsides?
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

33. Connecting to the real backend:
Downsides?
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

34. App Layers
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

35. Options for Mocking Web Service Requests
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

36. Local web server?
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

37. Options for Mocking Web Service Requests
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

38. Fake Module
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

41. API file setup
api.js
api.mock.js
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

42. api.js
import axios from 'axios';
const api = axios.create({
baseURL: 'https://api.reactnativetesting.io' ,
// other config
});
export default api;
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

43. api.mock.js
const api = {
get() {
return Promise.resolve({
data: [
{id: 1, name: 'Widget 1'},
{id: 2, name: 'Widget 2'},
]
});
},
// ...
};
export default api;
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

45. package.json
"start": "react-native start",
+"start:mock": "MOCK_API=true npm run start",
"test": "jest"
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

46. For Windows support
"start": "react-native start",
+"start:mock": "cross-env MOCK_API=true npm run start",
"test": "jest"
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

47. Questions?
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

48. 3. How Much to Test with
Detox
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

49. To the code!
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

50. Types of Detox Test (not rigid categories)
—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

51. Factors
—Flake
—Test speed
—Ease of writing
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

52. Types of Detox Test (not rigid categories)
—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

53. Questions?
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

58. 3. Slow
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

63. name: Detox
on:
push:
branches:
- main
pull_request:
types: [opened, synchronize, reopened]
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

64. jobs:
test:
runs-on: macos-12
steps:
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

65. - uses: actions/checkout@v4
- uses: actions/setup-node@v3
with:
node-version: 18
cache: "yarn"
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

66. - name: Cache Pods dependencies
uses: actions/cache@v3
with:
path: ios/Pods
key: ${{ runner.OS }}-pods-cache-${{ hashFiles('**/ios/Podfile.lock') }}
restore-keys: |
${{ runner.OS }}-pods-cache-
- name: Install npm dependencies
run: yarn install --frozen-lockfile
- name: Install iOS dependencies
run: npx pod-install
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

67. - name: Install Detox CLI
run: |
brew tap wix/brew
brew install applesimutils
npm install -g detox-cli
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

68. - name: Build App for Detox
run: detox build -c ios.sim.release
- uses: futureware-tech/simulator-action@v2
with:
model: "iPhone 14"
- name: Run Detox
run: detox test -c ios.sim.release
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

71. 3 Stages
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

72. Stage 1: Test Existing
Features
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

73. Stage 2: Test Features As
You Add
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

74. Stage 3: Test-Driven
Development
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

76. To the code!
learntdd.in/react-native
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

79. Questions?
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

88. Thanks!
Questions?
Josh Justice
[email protected]
https://rnte.st/london23
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23

89. Thanks!
Josh Justice
[email protected]
https://rnte.st/london23
Effective Detox Testing - Josh Justice - React Advanced - 2023-10-25 - https://rnte.st/london23