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.