React Native Testing Library - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the render function from React Native Testing Library.

React Native

import { [1] } from '@testing-library/react-native';

Drag options to blanks, or click blank then click option'

ArenderComponent

BrenderView

Crender

DrenderApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong import name like renderComponent or renderView.

The render function is the main way to render components for testing in React Native Testing Library.

2fill in blank

medium

Complete the code to find a button by its text using React Native Testing Library.

React Native

const { getByText } = render(<MyButton />);
const button = [1]('Click me');

Drag options to blanks, or click blank then click option'

AfindByText

BgetByText

CqueryByText

DgetByTestId

Attempts:

3 left

💡 Hint

Common Mistakes

Using findByText which is async or queryByText which returns null if not found.

getByText returns the element with the matching text or throws an error if not found, perfect for testing presence.

3fill in blank

hard

Fix the error in the test by completing the assertion to check if the button is pressed.

React Native

fireEvent.press(button);
expect([1]).toHaveBeenCalled();

Drag options to blanks, or click blank then click option'

AonPressMock

BpressHandler

Cbutton

DfireEvent

Attempts:

3 left

💡 Hint

Common Mistakes

Checking the button element itself or the event instead of the mock function.

The mock function passed as onPress should be checked if it was called after pressing the button.

4fill in blank

hard

Fill both blanks to query an input field by placeholder text and change its value.

React Native

const { [1] } = render(<MyInput />);
const input = [2]('Enter name');
fireEvent.changeText(input, 'John');

Drag options to blanks, or click blank then click option'

AgetByPlaceholderText

BgetByText

CqueryByPlaceholderText

DgetByTestId

Attempts:

3 left

💡 Hint

Common Mistakes

Using different query functions for render and input selection.

getByPlaceholderText is used to find input fields by their placeholder text.

5fill in blank

hard

Fill all three blanks to test if a text element updates after a button press.

React Native

const { [1] } = render(<Counter />);
const button = [2]('Increment');
fireEvent.press(button);
expect([3]('Count: 1')).toBeTruthy();

Drag options to blanks, or click blank then click option'

AgetByText

BgetByRole

CgetByTestId

DqueryByText

Attempts:

3 left

💡 Hint

Common Mistakes

Using getByText for the final check which throws if not found.

getByText is used to find the button and render function, while queryByText checks if the updated text exists after pressing.