Snapshot testing in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the snapshot testing function from React Native Testing Library.

React Native

import { [1] } from '@testing-library/react-native';

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

AwaitFor

BfireEvent

CtoMatchSnapshot

Drender

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a function that does not render the component, like fireEvent or waitFor.

Trying to import toMatchSnapshot directly from the library.

The render function is used to render the component for snapshot testing.

2fill in blank

medium

Complete the code to create a snapshot test for a component named MyButton.

React Native

test('renders correctly', () => {
  const tree = render(<MyButton />).[1]();
  expect(tree).toMatchSnapshot();
});

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

AtoJSON

Bdebug

CgetByText

Drerender

Attempts:

3 left

💡 Hint

Common Mistakes

Using debug which prints output but does not create snapshot data.

Using getByText which queries elements but does not create snapshot.

The toJSON method converts the rendered component to a JSON format suitable for snapshot comparison.

3fill in blank

hard

Fix the error in the snapshot test by completing the missing matcher.

React Native

expect(tree).[1]();

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

AtoBeTruthy

BtoMatchSnapshot

CtoEqual

DtoBeNull

Attempts:

3 left

💡 Hint

Common Mistakes

Using toBeTruthy which only checks if value is truthy, not snapshot.

Using toEqual which compares values but not snapshots.

The toMatchSnapshot matcher compares the rendered output to the saved snapshot.

4fill in blank

hard

Fill both blanks to create a snapshot test that renders MyComponent and converts it to JSON.

React Native

const tree = [1](<MyComponent />).[2]();

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

Arender

BtoJSON

CfireEvent

Ddebug

Attempts:

3 left

💡 Hint

Common Mistakes

Using fireEvent or debug instead of render for the first blank.

Using debug or fireEvent instead of toJSON for the second blank.

You first render the component with render, then convert it to JSON with toJSON for snapshot testing.

5fill in blank

hard

Fill all three blanks to write a snapshot test that renders Button, converts it to JSON, and expects it to match the snapshot.

React Native

test('Button snapshot', () => {
  const tree = [1](<Button />).[2]();
  expect(tree).[3]();
});

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

Arender

BtoJSON

CtoMatchSnapshot

Ddebug

Attempts:

3 left

💡 Hint

Common Mistakes

Using debug instead of render or toJSON.

Using toBeTruthy or toEqual instead of toMatchSnapshot.

This test renders the Button component, converts it to JSON, and checks if it matches the saved snapshot.