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.

Practice

1. What is the main purpose of snapshot testing in React Native?

easy

A. To check the app's performance speed

B. To test network requests and API responses

C. To detect unexpected changes in the UI output

D. To validate user input formats

Solution

1. Step 1: Understand snapshot testing goal

   Snapshot testing saves the UI output to detect changes later.

2. Step 2: Identify what snapshot testing checks

   It compares future UI renders to saved snapshots to catch unexpected changes.

3. Final Answer:

   To detect unexpected changes in the UI output -> Option C

4. Quick Check:

   Snapshot testing = UI change detection [OK]

Hint: Snapshot testing checks UI changes, not logic or speed [OK]

Common Mistakes:

• Confusing snapshot testing with API or performance tests
• Thinking it tests user input validation
• Assuming it measures app speed

2. Which of the following is the correct way to write a basic snapshot test in React Native using Jest?

easy

A. render().toMatchSnapshot();

B. expect(render()).toMatchSnapshot();

C. expect().toMatchSnapshot();

D. expect(render()).toBeSnapshot();

Solution

1. Step 1: Recall Jest snapshot syntax

   Jest requires wrapping the rendered output in expect() and calling toMatchSnapshot().

2. Step 2: Check each option's syntax

   expect(render()).toMatchSnapshot(); correctly wraps render output in expect() and calls toMatchSnapshot(). Others miss expect() or use wrong matcher.

3. Final Answer:

   expect(render()).toMatchSnapshot(); -> Option B

4. Quick Check:

   Use expect(render()).toMatchSnapshot() [OK]

Hint: Always wrap render output in expect() before toMatchSnapshot() [OK]

Common Mistakes:

• Omitting expect() around render output
• Using incorrect matcher like toBeSnapshot()
• Passing component directly to expect() without render

3. Given this snapshot test code:

const tree = render().toJSON();
expect(tree).toMatchSnapshot();

What will happen if the Button's title changes to "Press" in the next test run?

medium

A. The test will fail because the snapshot does not match

B. The test will pass because title changes are ignored

C. The test will throw a syntax error

D. The test will pass but log a warning

Solution

1. Step 1: Understand snapshot comparison

   Snapshots save the UI output including props like title. Changing title changes output.

2. Step 2: Effect of changing title on test

   Since the new render differs from saved snapshot, Jest will fail the test to alert the change.

3. Final Answer:

   The test will fail because the snapshot does not match -> Option A

4. Quick Check:

   Changed UI props cause snapshot test failure [OK]

Hint: Any UI change breaks snapshot test unless updated [OK]

Common Mistakes:

• Thinking snapshot ignores prop changes
• Expecting test to pass with changed UI
• Confusing snapshot failure with syntax errors

4. You wrote this snapshot test:

test('renders correctly', () => {
  const tree = render();
  expect(tree).toMatchSnapshot();
});

But Jest throws an error: expect(received).toMatchSnapshot is not a function. What is the likely cause?

medium

A. You should use toBeSnapshot() instead

B. You need to import toMatchSnapshot manually

C. The component MyComponent is missing props

D. You forgot to call .toJSON() on the render output

Solution

1. Step 1: Understand render output type

   render() returns an object, not a JSON serializable tree. toMatchSnapshot() works on JSON.

2. Step 2: Fix by calling toJSON()

   Calling toJSON() converts render output to snapshot-friendly format, enabling toMatchSnapshot() usage.

3. Final Answer:

   You forgot to call .toJSON() on the render output -> Option D

4. Quick Check:

   Call render().toJSON() before expect() [OK]

Hint: Always call .toJSON() on render output before snapshot [OK]

Common Mistakes:

• Skipping .toJSON() call on render output
• Trying to import toMatchSnapshot manually
• Using wrong matcher like toBeSnapshot()

5. You want to update your snapshot after intentionally changing your component's UI. Which command should you run to update the snapshot files?

hard

A. jest -u

B. jest --updateSnapshots

C. jest --updateSnapshot

D. jest --update-snapshots

Solution

1. Step 1: Recall Jest snapshot update command

   The correct Jest flag to update snapshots is -u or --updateSnapshot.

2. Step 2: Identify exact command

   Among options, only jest -u is the correct short form. Others are invalid or misspelled.

3. Final Answer:

   jest -u -> Option A

4. Quick Check:

   Use jest -u to update snapshots [OK]

Hint: Use jest -u to update snapshots after UI changes [OK]

Common Mistakes:

• Typing incorrect or misspelled flags
• Trying to update snapshots without flags
• Confusing updateSnapshot with updateSnapshots