Effective Detox Testing - React Advanced 2023

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

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

Prerequisites
— Experience with React Native
— Experience with Detox
— Experience with different types of tests: unit,
component, end-to-end

Josh Justice
CodingItWrong.com

ReactNativeTesting.io

https://rnte.st/london23

1. What kinds of things to
test with Detox
…vs. what kinds of things to test
with other tools

Kinds of Testing

"Testing is all about
confidence."

Realism != Confidence

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

A less-realistic, stable test
gives you more confidence than
a realistic, flaky test.

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.

Testing Goals
— Realism
— Speed
— Reliability

Manual Testing
— Animation smoothness
— User experience
— Integration with third-party
services

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?

Component Testing
— Fully cover logical branches in
UI code

Unit Testing
— Fully cover logical branches in
non-UI code

The more realistic the test,
the more effort it is to write
and maintain it.

Test Pyramid

Questions?

2. Faking the API Layer

Connecting to the real backend:
Upsides?

Connecting to the real backend:
Downsides?

App Layers

Options for Mocking Web Service Requests

Local web server?

Fake Module

What's a fake?
A version of the service that acts similar to the real thing
but stores its data in-memory

To the code!

API file setup
api.js
api.mock.js

api.js
import axios from 'axios';
const api = axios.create({
baseURL: 'https://api.reactnativetesting.io',
// other config
});
export default api;

api.mock.js
const api = {
get() {
return Promise.resolve({
data: [
{id: 1, name: 'Widget 1'},
{id: 2, name: 'Widget 2'},
]
});
},
// ...
};
export default api;

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

package.json
"start": "react-native start",
+"start:mock": "MOCK_API=true npm run start",
"test": "jest"

For Windows support
"start": "react-native start",
+"start:mock": "cross-env MOCK_API=true npm run start",
"test": "jest"

3. How Much to Test with
Detox

Types of Detox Test (not rigid categories)
— Boot test
— Play-around test
— The most important moneymaking feature, happy
path flow
— Secondary feature happy paths

Factors
— Flake
— Test speed
— Ease of writing

4. Detox on CI

CI for native mobile apps is
hard

1. Variations between CI
Platforms

2. Dependent on details of
specific versions
On GitHub Actions, Detox works for me on macos-12
and times out on macos-13

3. Slow

4. Expensive if you pay by the
hour

5. If you have a suite that passes
on developer machines, it's hard
to get it all passing on CI at once

My GitHub Actions Detox
CI Setup

To the YAML!

name: Detox
on:
push:
branches:
- main
pull_request:
types: [opened, synchronize, reopened]

jobs:
test:
runs-on: macos-12
steps:

- uses: actions/checkout@v4
- uses: actions/setup-node@v3
with:
node-version: 18
cache: "yarn"

- 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

- name: Install Detox CLI
run: |
brew tap wix/brew
brew install applesimutils
npm install -g detox-cli

- 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

Recommendation
— Pick your potential CI platform
— Try to get a boot test passing on CI
— If it doesn't work, try another platform

5. Local Detox development
workflow

3 Stages

Stage 1: Test Existing
Features

Stage 2: Test Features As
You Add

Stage 3: Test-Driven
Development

Getting Better All
the Time: How to
Escape Bad Code

To the code!
learntdd.in/react-native

Why TDD?
— Thorough test coverage.
— Code that is easy to test.
— Minimal code.

3 Stages
1. Test some existing features
2. Test new features as you add them
3. Test-driven development

What We Covered

3. How much to test with Detox
— Boot test
— Play-around test
— The most important moneymaking feature, happy
path flow
— Secondary feature happy paths

4. Detox on CI
GitHub Actions example config

5. Stages of Detox development
1. Test some existing features
2. Test new features as you add them
3. Test-driven development

What We Covered
3. How much of your app to test with Detox
4. Detox on CI
5. Local Detox development workflow

Thanks!
Questions?
Josh Justice
josh.justice@testdouble.com

Thanks!
Josh Justice
josh.justice@testdouble.com

Effective Detox Testing - React Advanced 2023

More Related Content

Similar to Effective Detox Testing - React Advanced 2023 (20)

More from Josh Justice (13)

Recently uploaded (20)

Effective Detox Testing - React Advanced 2023