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.

Practice

1. What is the main purpose of component testing in React Native?

easy

A. To check the app's network connectivity

B. To test the entire app's performance under load

C. To verify the app's installation process

D. To check small parts of the app work correctly on their own

Solution

1. Step 1: Understand component testing scope

   Component testing focuses on small parts, or components, of the app individually.

2. Step 2: Compare options to purpose

   Only To check small parts of the app work correctly on their own describes testing small parts alone, which matches component testing.

3. Final Answer:

   To check small parts of the app work correctly on their own -> Option D

4. Quick Check:

   Component testing = small parts tested alone [OK]

Hint: Component testing checks parts, not whole app [OK]

Common Mistakes:

• Confusing component testing with full app testing
• Thinking it tests app installation or network
• Assuming it tests performance or load

2. Which of the following is the correct way to import the render function from @testing-library/react-native?

easy

A. import { render } from '@testing-library/react-native';

B. import render from '@testing-library/react-native';

C. import * as render from '@testing-library/react-native';

D. import { Render } from '@testing-library/react-native';

Solution

1. Step 1: Recall correct import syntax for named exports

   Named exports are imported with curly braces, like { render }.

2. Step 2: Check each option

   import { render } from '@testing-library/react-native'; uses correct named import syntax; others are incorrect or use wrong casing.

3. Final Answer:

   import { render } from '@testing-library/react-native'; -> Option A

4. Quick Check:

   Named import uses curly braces [OK]

Hint: Use curly braces for named imports like render [OK]

Common Mistakes:

• Using default import syntax for named exports
• Wrong casing in import names
• Using * as import incorrectly

3. Given this test code, what will be the output of the test?

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

function Greeting() {
  return Hello, World!;
}

const { getByText } = render();
const element = getByText('Hello, World!');
console.log(element.props.children);

medium

A. undefined

B. Hello, World!

C. Error: Text not found

D. null

Solution

1. Step 1: Understand render and getByText usage

   The render function creates the component tree; getByText finds the Text with given string.

2. Step 2: Check what element.props.children contains

   The Text component's children is the string 'Hello, World!', so element.props.children is that string.

3. Final Answer:

   Hello, World! -> Option B

4. Quick Check:

   getByText finds text content correctly [OK]

Hint: getByText returns element with matching text [OK]

Common Mistakes:

• Assuming getByText returns undefined if found
• Confusing element props with state
• Expecting error when text exists

4. What is wrong with this test code snippet?

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

const { getByText } = render();
const button = getByText('Submit');
button.onPress();

medium

A. You cannot call onPress() directly on the element returned by getByText

B. render should be imported from 'react-native' not '@testing-library/react-native'

C. getByText should be called with a component, not a string

D. MyComponent must be wrapped in a <View> to render

Solution

1. Step 1: Understand what getByText returns

   getByText returns a React Test Instance, not a real component with event handlers.

2. Step 2: Check how to simulate press events

   To simulate press, use fireEvent.press(button) from testing library, not call onPress() directly.

3. Final Answer:

   You cannot call onPress() directly on the element returned by getByText -> Option A

4. Quick Check:

   Use fireEvent.press, not direct onPress call [OK]

Hint: Use fireEvent.press to simulate button press [OK]

Common Mistakes:

• Calling onPress() directly on test element
• Importing render from wrong package
• Misusing getByText argument type

5. You want to test a component that conditionally renders a <Text> with 'Logged In' only if the prop isLoggedIn is true. Which test code correctly checks this behavior?

hard

A. const { getByText } = render();
expect(getByText('Logged In')).toBeNull();

B. const { getByText } = render();
expect(queryByText('Logged In')).not.toBeNull();

C. const { queryByText } = render();
expect(queryByText('Logged In')).toBeNull();

D. const { queryByText } = render();
expect(getByText('Logged In')).toBeNull();

Solution

1. Step 1: Understand difference between getByText and queryByText

   getByText throws error if text not found; queryByText returns null if not found.

2. Step 2: Check test logic for isLoggedIn false

   When isLoggedIn is false, 'Logged In' text should not appear, so queryByText returns null.

3. Final Answer:

   const { queryByText } = render(<MyComponent isLoggedIn={false} />); expect(queryByText('Logged In')).toBeNull(); -> Option C

4. Quick Check:

   Use queryByText to check absence safely [OK]

Hint: Use queryByText to check if element is missing [OK]

Common Mistakes:

• Using getByText when element may be missing (causes error)
• Mixing getByText and queryByText incorrectly
• Expecting getByText to return null