React Native Testing Library - Mini App: Build & Ship

Build: Counter Screen

A simple screen with a counter that increments when a button is pressed. This screen helps practice writing tests using React Native Testing Library.

Target UI

Counter Screen

+---------------------+
| Count: 0            |
|                     |
| [ Increment ]       |
+---------------------+

Display the current count starting at 0

A button labeled 'Increment' that increases the count by 1 when pressed

Write a test that checks the initial count is 0

Write a test that simulates pressing the button and verifies the count increments

Starter Code

React Native

import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

export default function CounterScreen() {
  const [count, setCount] = useState(0);

  // TODO: Implement increment function and button press handler

  return (
    <View style={styles.container}>
      <Text testID="countText" style={styles.countText}>Count: {count}</Text>
      {/* TODO: Add Increment button here */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  countText: {
    fontSize: 24,
    marginBottom: 20,
  },
});

Task 1

Task 2

Solution

React Native

import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

export default function CounterScreen() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(prev => prev + 1);

  return (
    <View style={styles.container}>
      <Text testID="countText" style={styles.countText}>Count: {count}</Text>
      <Button title="Increment" onPress={increment} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  countText: {
    fontSize: 24,
    marginBottom: 20,
  },
});

This solution uses React Native's useState hook to keep track of the count. The increment function updates the count by adding 1 to the previous value. The Button component triggers this function when pressed. The Text component displays the current count and has a testID to help identify it in tests.

This setup makes it easy to write tests that check the initial count and simulate button presses to verify the count increments.

Final Result

Completed Screen

Counter Screen

+---------------------+
| Count: 0            |
|                     |
| [ Increment ]       |
+---------------------+

User sees 'Count: 0' text in the center

User taps the 'Increment' button

Count text updates to 'Count: 1', then 'Count: 2' with each tap

Stretch Goal

Write a test using React Native Testing Library that verifies the count increments when the button is pressed.

💡 Hint

Use render() to render the component, getByTestId() to find the count text, and fireEvent.press() to simulate button presses.

Practice

1. What is the main purpose of React Native Testing Library?

easy

A. To compile React Native code faster

B. To style components automatically

C. To test UI components by simulating user interactions

D. To deploy apps to app stores

Solution

1. Step 1: Understand the library's goal

   React Native Testing Library focuses on testing UI as a user would, not on compiling or styling.

2. Step 2: Match purpose with options

   Only To test UI components by simulating user interactions describes testing UI with user interaction simulation.

3. Final Answer:

   To test UI components by simulating user interactions -> Option C

4. Quick Check:

   Testing UI = B [OK]

Hint: Testing library simulates user actions, not builds or styles [OK]

Common Mistakes:

• Confusing testing with building or styling
• Thinking it deploys apps
• Assuming it compiles code

2. Which of the following is the correct way to import the render function from React Native Testing Library?

easy

A. import * as render from 'react-native-testing-library';

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

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

D. import { render } from 'react-native-testing-library';

Solution

1. Step 1: Recall correct import syntax

   The render function is a named export, so it must be imported with curly braces.

2. Step 2: Check each option

   import { render } from 'react-native-testing-library'; uses named import correctly. import render from 'react-native-testing-library'; imports default which is incorrect. import { render } from 'react-native-testing-library/react'; adds extra path which is invalid. import * as render from 'react-native-testing-library'; imports all as render which is wrong.

3. Final Answer:

   import { render } from 'react-native-testing-library'; -> Option D

4. Quick Check:

   Named import with braces = A [OK]

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

Common Mistakes:

• Using default import instead of named import
• Adding extra path in import
• Importing all as a single object incorrectly

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

const { getByText } = render(<Button title='Press me' onPress={() => {}} />);
const button = getByText('Press me');
expect(button).toBeTruthy();

medium

A. Test passes because the button with text 'Press me' exists

B. Test fails because getByText cannot find 'Press me'

C. Test throws a syntax error

D. Test fails because onPress is empty

Solution

1. Step 1: Analyze render and getByText usage

   The Button component is rendered with title 'Press me'. getByText('Press me') finds that text in the button.

2. Step 2: Understand expect assertion

   expect(button).toBeTruthy() checks that the button element exists, which it does.

3. Final Answer:

   Test passes because the button with text 'Press me' exists -> Option A

4. Quick Check:

   Element found = test passes = D [OK]

Hint: getByText finds visible text; empty onPress doesn't affect existence [OK]

Common Mistakes:

• Thinking onPress must have code to find button
• Confusing getByText with queryByText
• Assuming syntax error without checking code

4. Identify the error in this test code snippet:

const { getByTestId } = render(<Text testID='greeting'>Hello</Text>);
fireEvent.press(getByTestId('greeting'));
expect(getByTestId('greeting')).toBeTruthy();

medium

A. getByTestId is not a valid query

B. fireEvent.press is used on a Text component which is not pressable

C. Missing import of fireEvent

D. testID should be testId

Solution

1. Step 1: Check component and event compatibility

   Text component is not pressable by default, so fireEvent.press on it is invalid.

2. Step 2: Verify other parts

   getByTestId is valid, fireEvent is assumed imported, testID is correct casing.

3. Final Answer:

   fireEvent.press is used on a Text component which is not pressable -> Option B

4. Quick Check:

   Press event on non-pressable = error = A [OK]

Hint: Only pressable components respond to fireEvent.press [OK]

Common Mistakes:

• Assuming getByTestId is invalid
• Confusing testID casing
• Forgetting to import fireEvent (not shown here)

5. You want to test that pressing a button changes the text from 'Off' to 'On'. Which test code snippet correctly simulates this behavior?

hard

A. const { getByText } = render(<ToggleButton />);
fireEvent.press(getByText('Off'));
expect(getByText('On')).toBeTruthy();

B. const { getByText } = render(<ToggleButton />);
fireEvent.changeText(getByText('Off'));
expect(getByText('On')).toBeTruthy();

C. const { getByText } = render(<ToggleButton />);
fireEvent.press(getByText('On'));
expect(getByText('Off')).toBeTruthy();

D. const { getByText } = render(<ToggleButton />);
fireEvent.click(getByText('Off'));
expect(getByText('On')).toBeTruthy();

Solution

1. Step 1: Identify correct event for button press

   fireEvent.press simulates a tap on a button, which is correct for toggling.

2. Step 2: Check text change expectation

   After pressing 'Off', the text should change to 'On', so expect getByText('On') to be truthy.

3. Step 3: Eliminate wrong events

   fireEvent.changeText is for text inputs, fireEvent.click is not valid in React Native Testing Library, pressing 'On' expecting 'Off' is reversed.

4. Final Answer:

   Use fireEvent.press on 'Off' and expect 'On' text -> Option A

5. Quick Check:

   fireEvent.press + text toggle = C [OK]

Hint: Use fireEvent.press to simulate taps changing UI text [OK]

Common Mistakes:

• Using fireEvent.changeText on buttons
• Using fireEvent.click which is web-only
• Expecting wrong text after press