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

More Related Content

Similar to Intro to React Native Testing Library

More from Josh Justice

Recently uploaded

Intro to React Native Testing Library