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.

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