Component testing in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to render a simple React Native component that displays 'Hello World'.

React Native

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

export default function HelloWorld() {
  return (
    <View>
      <[1]>Hello World</[1]>
    </View>
  );
}

Drag options to blanks, or click blank then click option'

AScrollView

BButton

CText

DImage

Attempts:

3 left

💡 Hint

Common Mistakes

Using Button or Image components to display text.

Forgetting to close the component tag properly.

The Text component is used to display text in React Native. Here, it wraps the 'Hello World' string.

2fill in blank

medium

Complete the test code to render the HelloWorld component using React Native Testing Library.

React Native

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

test('renders HelloWorld component', () => {
  const { getByText } = render([1]);
  expect(getByText('Hello World')).toBeTruthy();
});

Drag options to blanks, or click blank then click option'

A<HelloWorld />

BHelloWorld

Crender(HelloWorld)

D<HelloWorld>

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the component function instead of JSX element.

Omitting the closing slash in the JSX tag.

The render function expects a React element, so we pass the component as .

3fill in blank

hard

Fix the error in the test by completing the assertion to check if the button is pressable.

React Native

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import MyButton from './MyButton';

test('button press triggers callback', () => {
  const onPressMock = jest.fn();
  const { getByText } = render(<MyButton onPress={onPressMock} />);
  fireEvent.press(getByText('Press me'));
  expect(onPressMock[1]);
});

Drag options to blanks, or click blank then click option'

A.toBeCalledTimes(0)

B.not.toHaveBeenCalled()

C.toBeUndefined()

D.toHaveBeenCalled()

Attempts:

3 left

💡 Hint

Common Mistakes

Using negative matchers like .not.toHaveBeenCalled() which fail the test.

Checking for zero calls instead of at least one.

toHaveBeenCalled() checks if the mock function was called after the button press event.

4fill in blank

hard

Fill both blanks to create a snapshot test for the Greeting component with a name prop.

React Native

import React from 'react';
import renderer from 'react-test-renderer';
import Greeting from './Greeting';

test('Greeting matches snapshot', () => {
  const tree = renderer.create(<Greeting [1]=[2] />).toJSON();
  expect(tree).toMatchSnapshot();
});

Drag options to blanks, or click blank then click option'

Aname

B"John"

Cage

D25

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect prop keys like 'age'.

Passing numbers instead of strings for name.

The Greeting component expects a 'name' prop, here set to the string 'John' for snapshot testing.

5fill in blank

hard

Fill all three blanks to test if a TextInput updates its value on change.

React Native

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import InputComponent from './InputComponent';

test('updates TextInput value on change', () => {
  const { getByPlaceholderText } = render(<InputComponent />);
  const input = getByPlaceholderText([1]);
  fireEvent.changeText(input, [2]);
  expect(input.props.[3]).toBe('Hello');
});

Drag options to blanks, or click blank then click option'

A"Enter text"

B"Hello"

Cvalue

Dplaceholder

Attempts:

3 left

💡 Hint

Common Mistakes

Using placeholder instead of value in the expect statement.

Passing incorrect placeholder text.

The placeholder text is 'Enter text', the new input value is 'Hello', and the TextInput's value prop reflects the current 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