React Native Testing Library - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this test?

Given this React Native component and test, what will the test output be?

React Native

import React from 'react';
import { Text, Button, View } from 'react-native';
import { render, fireEvent } from '@testing-library/react-native';

function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <View>
      <Text testID="count-text">Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
}

const { getByTestId, getByText } = render(<Counter />);
fireEvent.press(getByText('Increment'));
const text = getByTestId('count-text').props.children.join('');

A "Count: 1"

B TypeError: Cannot read property 'join' of undefined

C "Count: 0"

D "Count: undefined"

💡 Hint

Remember that pressing the button updates the state and the text reflects the new count.

The button press triggers setCount to increase count by 1. The Text component then shows 'Count: 1'. The children prop is an array: ['Count: ', 1], so joining them produces 'Count: 1'.

❓ lifecycle

intermediate

Which lifecycle behavior does this test verify?

Consider this test for a React Native component that fetches data on mount. What lifecycle behavior is being tested?

React Native

import React from 'react';
import { Text } from 'react-native';
import { render, waitFor } from '@testing-library/react-native';

function DataFetcher({ fetchData }) {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    fetchData().then(setData);
  }, [fetchData]);
  return <Text>{data ?? 'Loading...'}</Text>;
}

const mockFetch = () => Promise.resolve('Hello');
const { getByText } = render(<DataFetcher fetchData={mockFetch} />);
await waitFor(() => getByText('Hello'));

A ComponentWillUnmount cleans up fetchData call

B ComponentDidMount triggers fetchData and updates state asynchronously

C ComponentDidUpdate triggers fetchData on every render

D ComponentDidCatch handles fetchData errors

💡 Hint

Look at when fetchData is called inside useEffect.

The useEffect hook runs once after the component mounts, simulating componentDidMount. It calls fetchData and updates state asynchronously.

📝 Syntax

advanced

What error does this test code produce?

Identify the error when running this React Native Testing Library code snippet.

React Native

import React from 'react';
import { Text } from 'react-native';
import { render } from '@testing-library/react-native';

const { getByText } = render(<Text>Hello</Text>);
getByText('Hello').props.onPress();

A TypeError: getByText(...).props.onPress is not a function

B ReferenceError: Text is not defined

C SyntaxError: Unexpected token <

D No error, runs successfully

💡 Hint

Check if all components are imported correctly.

The Text component is used and imported correctly, so no ReferenceError. However, the Text component does not have an onPress prop, so calling onPress() results in a TypeError.

❓ navigation

advanced

What will this test verify about navigation?

Given this test for a React Navigation screen, what behavior does it check?

React Native

import React from 'react';
import { Button } from 'react-native';
import { render, fireEvent } from '@testing-library/react-native';

function HomeScreen({ navigation }) {
  return <Button title="Go" onPress={() => navigation.navigate('Details')} />;
}

const mockNavigate = jest.fn();
const { getByText } = render(<HomeScreen navigation={{ navigate: mockNavigate }} />);
fireEvent.press(getByText('Go'));
expect(mockNavigate).toHaveBeenCalledWith('Details');

A The test ensures navigation.goBack is called on button press

B The test verifies the Details screen is rendered after button press

C The test checks if pressing the button calls navigation.navigate with 'Details'

D The test confirms navigation.reset is called with empty routes

💡 Hint

Look at what mock function is called when the button is pressed.

The test simulates pressing the button and verifies that navigation.navigate was called with the argument 'Details'.

🔧 Debug

expert

Why does this test fail with a timeout?

This test tries to wait for a text update but fails with a timeout error. Why?

React Native

import React from 'react';
import { Text, Button } from 'react-native';
import { render, fireEvent, waitFor } from '@testing-library/react-native';

function AsyncButton() {
  const [text, setText] = React.useState('Start');
  const onPress = () => {
    setTimeout(() => setText('Done'), 1000);
  };
  return <><Text>{text}</Text><Button title="Press" onPress={onPress} /></>;
}

const { getByText } = render(<AsyncButton />);
fireEvent.press(getByText('Press'));
await waitFor(() => getByText('Done'), { timeout: 500 });

A The getByText selector is case sensitive and misses 'Done'

B The setTimeout callback never runs because of missing cleanup

C The fireEvent.press does not trigger onPress handler

D The waitFor timeout is too short to catch the delayed text update

💡 Hint

Compare the setTimeout delay with the waitFor timeout.

The text changes after 1000ms but waitFor only waits 500ms before timing out, so it never sees the updated text.