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.