Snapshot testing in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What does this snapshot test verify?

Consider this React Native snapshot test code:

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

test('Button renders correctly', () => {
  const tree = renderer.create(<Button title='Click me' />).toJSON();
  expect(tree).toMatchSnapshot();
});

What is this test checking?

React Native

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

test('Button renders correctly', () => {
  const tree = renderer.create(<Button title='Click me' />).toJSON();
  expect(tree).toMatchSnapshot();
});

A It tests that the Button component's title prop changes dynamically.

B It verifies the Button component's onPress function is called.

C It checks that the Button component renders the same UI structure as before.

D It ensures the Button component's styles are applied correctly.

💡 Hint

Snapshot tests compare the rendered output structure to a saved version.

Snapshot testing captures the rendered UI tree and compares it to a saved snapshot file. This test ensures the Button's UI structure has not changed unexpectedly.

❓ lifecycle

intermediate

When should you update a snapshot test?

You run a snapshot test and it fails because the UI changed intentionally. What should you do next?

A Update the snapshot to reflect the new UI and commit the change.

B Ignore the failure and keep the old snapshot.

C Delete the snapshot test to avoid future failures.

D Change the component code back to match the old snapshot.

💡 Hint

Snapshots should match the intended UI state.

When UI changes are intentional, update the snapshot so future tests compare against the new correct UI.

🔧 Debug

advanced

Why does this snapshot test fail with a syntax error?

Look at this snapshot test snippet:

test('renders text', () => {
  const tree = renderer.create(Hello).toJSON()
  expect(tree).toMatchSnapshot()
})

Why might this cause a syntax error?

A Missing semicolons cause syntax errors in JavaScript tests.

B The JSX <Text> element is not imported or defined in the test file.

C expect() is not imported from the testing library.

D toJSON() is not a function on the renderer object.

💡 Hint

JSX elements must be imported or defined before use.

If is not imported from 'react-native' or defined, the JSX parser throws a syntax error.

🧠 Conceptual

advanced

What is a limitation of snapshot testing in React Native?

Which of these is a common limitation of snapshot tests?

A They cannot detect changes in component behavior or logic, only UI structure.

B They only work on Android devices, not iOS.

C They require manual user interaction to run.

D They always fail when styles change, even if the UI looks the same.

💡 Hint

Snapshot tests compare UI output, not how components behave.

Snapshot tests capture UI structure but do not test how components behave or respond to events.

📝 Syntax

expert

What is the output of this snapshot test code?

Given this test code:

import React from 'react';
import renderer from 'react-test-renderer';

const MyComponent = () => <Text>Hello</Text>

test('MyComponent snapshot', () => {
  const tree = renderer.create(<MyComponent />).toJSON();
  console.log(tree.type);
  expect(tree.type).toBe('Text');
});

What will be printed to the console when this test runs?

A Error: Text is not defined

B MyComponent

C Text

D undefined

💡 Hint

What does toJSON() return for a React Native component without importing Text?

Without importing Text from 'react-native', the JSX is treated as a custom component, so the rendered JSON's type is undefined.

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