Jest setup for unit tests in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Jest configuration file syntax

Which of the following is the correct way to export a Jest configuration in a jest.config.js file for a React Native project?

A export default { preset: 'react-native' };

B module.exports = { preset: 'react-native' };

C exports = { preset: 'react-native' };

D module.export = { preset: 'react-native' };

💡 Hint

Remember that Jest config files use CommonJS syntax by default.

Jest configuration files typically use CommonJS syntax with module.exports. Option B correctly exports the config object. Option B uses ES module syntax which Jest does not support by default. Option B assigns to 'exports' instead of 'module.exports', which won't work properly. Option B has a typo 'module.export' instead of 'module.exports'.

❓ ui_behavior

intermediate

Jest test output for a failing test

Given this simple React Native component test, what will Jest output if the test fails because the text is not found?

import React from 'react';
import { render } from '@testing-library/react-native';
import Greeting from './Greeting';

test('renders greeting text', () => {
  const { getByText } = render(<Greeting name="Alice" />);
  getByText('Hello Bob');
});

A Throws an error: Unable to find an element with text: Hello Bob

B Test passes silently with no output

C Throws a syntax error due to invalid JSX

D Returns null and test passes

💡 Hint

Think about what happens when getByText does not find the text.

The getByText query throws an error if the text is not found, causing the test to fail with a message indicating the missing text. It does not return null or pass silently. There is no syntax error in the code.

❓ lifecycle

advanced

Jest setup and teardown methods

Which Jest lifecycle method is best to use for cleaning up mocks after each test in a React Native test suite?

A beforeEach(() => { jest.clearAllMocks(); });

B afterAll(() => { jest.clearAllMocks(); });

C afterEach(() => { jest.clearAllMocks(); });

D beforeAll(() => { jest.clearAllMocks(); });

💡 Hint

Think about when you want to reset mocks to avoid test interference.

Using afterEach ensures mocks are cleared after every test, preventing one test's mocks from affecting another. beforeAll and afterAll run only once for the whole suite, which is not enough. beforeEach runs before each test but clearing mocks after tests is safer.

❓ navigation

advanced

Mocking React Navigation in Jest tests

In a React Native app using React Navigation, which Jest mock setup correctly mocks the useNavigation hook to avoid errors in unit tests?

A jest.mock('@react-navigation/native', () => ({ useNavigation: () => ({ navigate: jest.fn() }) }));

B jest.mock('react-navigation', () => ({ useNavigation: () => ({ navigate: jest.fn() }) }));

C jest.mock('@react-navigation/native', () => ({ useNavigation: jest.fn() }));

D jest.mock('@react-navigation/native', () => ({ useNavigation: () => 'navigate' }));

💡 Hint

Check the correct package name and the shape of the mocked hook.

Option A correctly mocks the '@react-navigation/native' package and returns an object with a navigate function as jest.fn(), matching the hook's expected return. Option A uses wrong package name. Option A mocks useNavigation as a jest.fn() itself, not a function returning an object. Option A returns a string instead of an object.

🔧 Debug

expert

Diagnosing Jest test timeout in React Native

A Jest test for a React Native component using async storage hangs and eventually times out. Which of the following is the most likely cause?

A The test file is named incorrectly and Jest does not find it.

B The component has a syntax error preventing it from rendering.

C Jest configuration file is missing the preset 'react-native'.

D The async storage mock is missing or not properly set up, causing unresolved promises.

💡 Hint

Think about what happens when async functions never resolve in tests.

If async storage is not mocked properly, calls to it return unresolved promises, causing tests to hang and timeout. Syntax errors cause immediate failures, not hangs. Missing preset causes config errors, not hangs. Incorrect file names cause tests to be skipped, not hang.