Component testing in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this React Native component test?

Consider this test for a simple button component. What will the test output be?

React Native

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

function MyButton({ onPress }) {
  return <TouchableOpacity onPress={onPress} accessibilityLabel="my-button">
    <Text>Press me</Text>
  </TouchableOpacity>;
}

test('button press triggers handler once', () => {
  const handler = jest.fn();
  const { getByA11yLabel } = render(<MyButton onPress={handler} />);
  fireEvent.press(getByA11yLabel('my-button'));
  expect(handler).toHaveBeenCalledTimes(1);
});

A Test fails because the handler is never called.

B Test passes because the button press calls the handler exactly once.

C Test fails due to syntax error in the component code.

D Test fails because the accessibilityLabel is missing.

💡 Hint

Check if the button has the correct accessibility label and if the press event triggers the handler.

The test renders the button with an accessibility label 'my-button'. The fireEvent.press simulates a press on that button, which calls the handler once. The expect assertion confirms the handler was called exactly once, so the test passes.

❓ lifecycle

intermediate

What happens to the component state after this test?

Given this React Native component and test, what is the final value of the displayed count after the test runs?

React Native

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

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

test('increments count on button press', () => {
  const { getByText, getByTestId } = render(<Counter />);
  fireEvent.press(getByText('Increment'));
  fireEvent.press(getByText('Increment'));
  expect(getByTestId('count-text').props.children.join('')).toBe('Count: 2');
});

A The displayed count is 'Count: 1' because only one press is registered.

B The displayed count remains 'Count: 0' because state does not update in tests.

C The test throws an error because children is not an array.

D The displayed count is 'Count: 2' after two presses.

💡 Hint

Check how many times the increment button is pressed and how state updates.

Each press calls setCount with count + 1, so after two presses, count is 2. The testID text shows 'Count: 2', so the test passes.

📝 Syntax

advanced

Which option causes a syntax error in this React Native test?

Identify which test code snippet will cause a syntax error when testing a component.

A test('missing closing parenthesis', () => { const { getByText } = render(<Text>Hello</Text>); expect(getByText('Hello')).toBeTruthy();

B test('renders text', () => { const { getByText } = render(<Text>Hello</Text>); expect(getByText('Hello')).toBeTruthy(); });

C test('correct async test', async () => { const { findByText } = render(<Text>Hi</Text>); expect(await findByText('Hi')).toBeTruthy(); });

D test('renders button', () => { const { getByRole } = render(<Button title='Click' onPress={() => {}} />); expect(getByRole('button')).toBeTruthy(); });

💡 Hint

Look for missing brackets or parentheses in the test code.

Option A is missing the closing parenthesis and curly brace for the test function, causing a syntax error.

🔧 Debug

advanced

Why does this test fail to find the button?

This test tries to find a button by accessibility label but fails. Why?

React Native

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

function MyButton() {
  return <TouchableOpacity>
    <Text>Click me</Text>
  </TouchableOpacity>;
}

test('finds button by accessibility label', () => {
  const { getByA11yLabel } = render(<MyButton />);
  getByA11yLabel('my-button');
});

A The TouchableOpacity lacks the accessibilityLabel prop, so getByA11yLabel cannot find it.

B The test fails because Text components cannot have accessibility labels.

C The test fails because getByA11yLabel requires a testID instead.

D The test fails because TouchableOpacity is not a valid React Native component.

💡 Hint

Check if the component has the accessibilityLabel property set.

The TouchableOpacity does not have accessibilityLabel='my-button', so getByA11yLabel('my-button') throws an error because it cannot find the element.

🧠 Conceptual

expert

What is the main benefit of using React Native Testing Library over Enzyme for component testing?

Choose the best reason why React Native Testing Library is preferred for testing React Native components.

A It automatically generates UI tests without writing any test code.

B It provides faster snapshot testing and shallow rendering capabilities than Enzyme.

C It encourages testing components the way users interact with them, focusing on accessibility and behavior rather than implementation details.

D It requires less setup and supports testing native modules directly without mocks.

💡 Hint

Think about how users experience the app and what testing approach matches that.

React Native Testing Library promotes testing by simulating user interactions and querying elements by accessibility labels or text, which leads to more reliable and maintainable tests focused on user experience.