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.