Component testing in React Native - Mini App: Build & Ship

Build: Greeting Screen

A simple screen that shows a greeting message and a button to change the greeting.

Target UI

---------------------
| Greeting Screen    |
|-------------------|
|                   |
| Hello, User!      |
|                   |
| [Change Greeting] |
|                   |
---------------------

Display a greeting message in a Text component.

Add a button labeled 'Change Greeting'.

When the button is pressed, the greeting message changes to 'Welcome to React Native!'.

Write a component test to verify the initial greeting text.

Write a component test to verify the greeting changes after button press.

Starter Code

React Native

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

export default function GreetingScreen() {
  const [greeting, setGreeting] = useState('Hello, User!');

  // TODO: Add button press handler to change greeting

  return (
    <View style={styles.container}>
      <Text style={styles.greetingText}>{greeting}</Text>
      <Button title="Change Greeting" onPress={() => { /* TODO: change greeting */ }} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  greetingText: {
    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 GreetingScreen() {
  const [greeting, setGreeting] = useState('Hello, User!');

  const changeGreeting = () => {
    setGreeting('Welcome to React Native!');
  };

  return (
    <View style={styles.container}>
      <Text testID="greetingText" style={styles.greetingText}>{greeting}</Text>
      <Button title="Change Greeting" onPress={changeGreeting} />
    </View>
  );
}

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

This component uses React Native's useState hook to keep track of the greeting message. Initially, it shows "Hello, User!". When the user taps the "Change Greeting" button, the changeGreeting function updates the state to "Welcome to React Native!", which updates the displayed text.

We added a testID to the Text component to make it easy to find in tests.

Component tests should check that the initial text is correct and that pressing the button changes the text as expected.

Final Result

Completed Screen

---------------------
| Greeting Screen    |
|-------------------|
|                   |
| Welcome to React   |
| Native!            |
|                   |
| [Change Greeting] |
|                   |
---------------------

User sees 'Hello, User!' initially.

User taps 'Change Greeting' button.

Greeting text changes to 'Welcome to React Native!'.

Stretch Goal

Write a component test that simulates the button press and verifies the greeting text changes.

💡 Hint

Use React Native Testing Library's fireEvent.press and getByTestId to simulate and check text.