Intro to React Native Testing Library

Intro to React Native Testing Library
While we're waiting to start, if you're comfortable, share
your answer to the following question in the chat:
What do you want to learn about testing in this workshop?
Introduction to React Native Testing Library - Josh Justice - React Advanced London - 2022-10-28 - https://rnte.st/london22

Intro to React Native Testing Library
https://rnte.st/london22
Clone the repo, build, and test!

Josh Justice
CodingItWrong.com

ReactNativeTesting.io

What We'll Cover
— React Native Testing Library
— Jest Native

What We Won't Cover
— Jest basics
— End-to-end testing (Detox, Appium)

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

02 Component Tests:
Rendering
Intro to React Native Testing
Library

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

Question: what are some of the kinds of inputs and
outputs that components have?
Answer in the chat!

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

To the code!

Getter Functions
— screen.getByText
— screen.getByLabelText
— screen.getByPlaceholder

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')

Query Functions
— screen.queryByText
— screen.queryByLabelText
— screen.queryByPlaceholder

Which Query Should I Use?
https://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?
https://callstack.github.io/react-native-testing-library/docs/how-should-i-query

Note on getByRole()
screen.getByRole('button', {name: 'Save Changes'})
— Likely going to be the top recommendation soon
— Feature needed first: implicit roles (Pressables
queryable as button by default)

Confirming Presence
expect(screen.getBy…()).toBeVisible();
As of jest-native 5.1

Confirming Presence -Alternatives
expect(screen.getBy…()).toBeTruthy();
expect(screen.queryBy…()).toBeTruthy();
screen.getBy…();

Confirming Presence
expect(screen.getBy…()).toBeVisible();
✅
Gives best error message
✅
Looks like an expectation
✅
Does extra visibility checking for realism

Confirming Absence
expect(screen.queryBy…()).toBeNull();

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

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

Exercise 1
— intro-to-rntl-exercises
— exercises/1-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
Library

import {render, fireEvent} 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)

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 myMockFunction = jest.fn().mockName('myMockFunction');

Mock Matchers
expect(myMock).toHaveBeenCalled();
expect(myMock).toHaveBeenCalledWith(param, otherParam, ...);
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} />);
fireEvent.changeText(
screen.getByPlaceholderText('Message'),
messageText,
);
fireEvent.press(screen.getByText('Send'));
expect(sendHandler).toHaveBeenCalledWith(messageText);
});

Are mocks
Testing implementation
details?

No, mocks are an essential 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
Library

How can we test effects?

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

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 WidgetContainer from './WidgetContainer';
import api from './api';
jest.mock('./api');
describe('WidgetContainer', () => {
it('loads widgets upon first render', async () => {
api.get.mockResolvedValue({/* the response object */});
render(<WidgetContainer />);
await screen.findByText('Widget 1'));
expect(screen.getByText('Widget 2')).toBeVisible();
expect(api.get).toHaveBeenCalledWith('/widgets');
});
});

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

Find Functions
— screen.findByText
— screen.findByLabelText
— screen.findByPlaceholder

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

act() Error

05 Wrap-up
Library

What did we learn?
— What does it mean to test the contract?
— Why test the contract?
— What are the inputs and outputs of a component?

Remaining Questions?

Continuing the Learning
— https://rnte.st/london22
— Discord community

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

Intro to React Native Testing Library

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Intro to React Native Testing Library

Similar to Intro to React Native Testing Library (20)

More from Josh Justice

More from Josh Justice (12)

Recently uploaded

Recently uploaded (20)

Intro to React Native Testing Library