Testing React Native Apps - Chain React 2023

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

https://rnte.st/cr23
Clone the repo, build, and test!

ReactNativeTesting.io

Josh Justice
CodingItWrong.com

Thank you, assistants!
— David Leuiliette
— Jon Major Condon

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?

Why Test?

My Story

Testing Pain Points
— Difficult to test
— Flaky tests
— Fragile tests

Example-Based Tests
— Component tests (React Native Testing Library)
— End-to-end tests (Detox)

Learning More Afterward
— https://rnte.st/cr23
— Discord community

Questions and thoughts
welcome!

Stretch break!

02 Component Tests:
Rendering

What is a component test?

React Native Testing Library
@testing-library/react-native
callstack.github.io/react-native-testing-library

What to test?
— Call methods/functions?
— Check state values?

"We don’t encourage reading implementation details
like state variables themselves…Instead, test observable
behavior — i.e. what your component renders or does."
-- @dan_abramov, 2019-03-06 tweet

Testing the Contract

"A component contract is the agreement between a
component and the rest of the application."
-- Edd Yerburgh, Testing Vue.js Applications

"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

Discuss:
What are some of the kinds
of inputs and outputs that
components have?

Inputs:
— Props
— User interaction events
Outputs:
— Rendered UI
— Calls to function props

To the code!

Getter Functions
— screen.getByText
— screen.getByLabelText
— screen.getByPlaceholderText

Text
return <Text>Hello, world!</Text>;
screen.getByText('Hello, world!')

TextInput
return <TextInput placeholder="Enter your name" ... />;
screen.getByPlaceholderText('Enter your name')

Image
return (
<Image source={...} accessibilityLabel="squirrel waving" />
);
screen.getByLabelText('squirrel waving')

SVG
import WavingHand from './assets/waving-hand.svg';
return <WavingHand accessibilityLabel="waving hand" />;
screen.getByLabelText('waving hand')

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"

Which Query Should I Use?
callstack.github.io/react-native-testing-library/docs/how-should-i-query

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)

Confirming Presence
expect(screen.getBy…()).toBeVisible();
expect(screen.getBy…()).toBeOnTheScreen();

Confirming Absence
expect(screen.queryBy…()).not.toBeOnTheScreen();

Query Functions
— screen.queryByText
— screen.queryByLabelText
— screen.queryByPlaceholderText

Inputs:
— Props
— User interaction events
Outputs:
✅
Rendered UI
- Calls to function props

Inputs:
✅
Props
- User interaction events
Outputs:
✅
Rendered UI

Exercise 1
— rn-testing-exercises
— exercises/Exercise1.md
For help:
reactnativetesting.io/component/testing/

A few more notes about testing
rendering and props

Testing content,
not appearance.

What about snapshot tests?

import renderer from 'react-test-renderer';
import Hello from './Hello';
it('renders correctly', () => {
const tree = renderer.create(<Hello name="Josh" />).toJSON();
expect(tree).toMatchSnapshot();
});

03 Component Tests:
Actions and Mocks

import {fireEvent, render, screen} from '@testing-library/react-native';
describe('NewMessageForm', () => {
describe('pressing send', () => {
it('clears the message field', () => {
render(<NewMessageForm />);
fireEvent.changeText(
screen.getByPlaceholderText('Message'),
'Hello world',
);
fireEvent.press(screen.getByText('Send'));
expect(screen.getByPlaceholderText('Message')).toHaveProp('value', '');
});
});
});

fireEvent
import {fireEvent} from '@testing-library/react-native';
fireEvent.press(element)
fireEvent.changeText(element, text)
fireEvent.scroll(element, eventData)
fireEvent(element, eventName, eventData)

import {render, fireEvent} from '@testing-library/react-native';
describe('NewMessageForm', () => {
describe('pressing send', () => {
it('clears the message field', () => {
render(<NewMessageForm />);
'Hello world',
);
expect(screen.getByPlaceholderText('Message')).toHaveProp('value', '');
});
});
});

toHaveProp
Provided by Jest Native
expect(...).toHaveProp('propName', 'propValue');

Inputs:
✅
Props
✅
User interaction events
Outputs:
✅
Rendered UI

Mock Functions
jestjs.io/docs/mock-functions

Creating a New Mock Function
const myMock = jest.fn().mockName('myMock');

Mock Matchers
expect(myMock).toHaveBeenCalled();
expect(myMock).toHaveBeenCalledWith(arg, secondArg, ...);
expect(myMock).toHaveBeenCalledWith(expect.any(String));

it('calls the send handler', () => {
const messageText = 'Hello world';
const sendHandler = jest.fn().mockName('sendHandler');
render(<NewMessageForm onSend={sendHandler} />);
messageText,
);
expect(sendHandler).toHaveBeenCalledWith(messageText);
});

Question:
Do you think mocks involve
testing implementation
details or not?

My view:
Mocks are an important
part of testing the contract.

Inputs:
✅
Props
✅
User interaction events
Outputs:
✅
Rendered UI
✅
Calls to function props

Exercise 2
For help:
reactnativetesting.io/component/testing/#interaction

04 Component Tests:
Effects and Module Mocks

How can we test effects?

How can we test effects?
Test the result/"effect".

Data loading effects hit the API
Problem?

Options for Mocking Web Service Requests

Jest Module Mocks
jestjs.io/docs/mock-functions#mocking-modules

import {render, screen} from '@testing-library/react-native';
import RestaurantContainer from './RestaurantContainer';
import api from './api';
jest.mock('./api');
describe('RestaurantContainer', () => {
it('loads restaurants upon first render', async () => {
api.get.mockResolvedValue({/* the response object */});
render(<RestaurantContainer />);
expect(await screen.findByText('Pasta Place')).toBeVisible();
expect(screen.getByText('Salad Place')).toBeVisible();
expect(api.get).toHaveBeenCalledWith('/restaurants');
});
});

mockedModule.myfunc.mockReturnValue(val);
mockedModule.myfunc.mockResolvedValue(val);
mockedModule.myfunc.mockRejectedValue(val);
jestjs.io/docs/mock-function-api

Find Functions
— await screen.findByText
— await screen.findByLabelText
— await screen.findByPlaceholderText

Exercise 3
For help:
reactnativetesting.io/component/testing

act() Error

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.

05 End-to-End Testing:
Basics

E2E Tests

Choosing an E2E Test
Library

— 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

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

Maestro
— Easy setup, a single library
— Runs completely outside your
app
— Maestro Studio to
interactively write commands
— New; rough edges

it('detects text', async () => {
await expect(element(by.label('Hello, Lecture 5!'))).toBeVisible();
});

element(…)

it('should have welcome screen', async () => {
await expect(
element(by.label('Welcome to React Native!'))
).toBeVisible();
});

Matchers
by.id()
by.text()
by.label()

await expect(element(by.id('welcome')))
.toBeVisible();
await expect(element(by.id('welcome')))
.toHaveText('Welcome to React Native!');

Expectations
toExist()
toBeVisible()
toHaveText()
toHaveValue()

await element(by.id('mybutton')).tap();

await element(by.id('mytextinput'))
.typeText('I typed this');
.clearText();
.typeText('Something else');
.replaceText('Something else');

Actions
tap()
typeText()
clearText()
replaceText()
scroll()
swipe()

What to E2E test?
Main paths, not all edge cases

06 End-to-End Testing:
External Services

Connecting to the real backend:
Upsides?

Connecting to the real backend:
Downsides?

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

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
— 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"

Exercise 4
For help:
— reactnativetesting.io/e2e/testing

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

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.

07 Wrap-up

How much of each type of
test to do?

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

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

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!

Remaining Questions?

Continuing the Learning
— https://rnte.st/cr23
— https://reactnativetesting.io
— Discord community

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

Thanks!
https://rnte.st/cr23survey
Josh Justice
josh.justice@testdouble.com
https://rnte.st/cr23

Testing React Native Apps - Chain React 2023

More Related Content

Similar to Testing React Native Apps - Chain React 2023 (20)

More from Josh Justice (13)

Recently uploaded (20)

Testing React Native Apps - Chain React 2023