Mocking native modules in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the native module mock.

React Native

import { [1] } from 'react-native';

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

ANativeModules

BNativeModule

CNativeModulesMock

DNativeModuleMock

Attempts:

3 left

💡 Hint

Common Mistakes

Using singular NativeModule instead of NativeModules.

Trying to import a mock directly without NativeModules.

The correct import for accessing native modules in React Native is NativeModules.

2fill in blank

medium

Complete the code to mock the native module method 'getDeviceName'.

React Native

NativeModules.DeviceInfo = {
  getDeviceName: jest.fn().mockReturnValue([1])
};

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

APixel 5

Bjest.fn()

C'getDeviceName'

D'Pixel 5'

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around the string value.

Passing jest.fn() instead of a string to mockReturnValue.

The mockReturnValue should be a string representing the device name, so it must be in quotes.

3fill in blank

hard

Fix the error in the mock setup by completing the code.

React Native

jest.mock('react-native', () => ({
  NativeModules: {
    DeviceInfo: {
      getDeviceName: jest.fn().mockResolvedValue([1])
    }
  }
}));

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

Ajest.fn()

B'Pixel 5'

C'getDeviceName'

DPixel 5

Attempts:

3 left

💡 Hint

Common Mistakes

Passing an unquoted string causing a ReferenceError.

Using jest.fn() inside mockResolvedValue.

mockResolvedValue expects the resolved value, which should be a string in quotes.

4fill in blank

hard

Fill both blanks to mock two native module methods correctly.

React Native

NativeModules.DeviceInfo = {
  getDeviceName: jest.fn().mockReturnValue([1]),
  getSystemVersion: jest.fn().mockReturnValue([2])
};

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

A'iPhone 13'

B'15.4'

C15.4

DiPhone 13

Attempts:

3 left

💡 Hint

Common Mistakes

Not quoting the version number as a string.

Using unquoted values causing runtime errors.

Both mocked return values should be strings, so they need to be quoted.

5fill in blank

hard

Fill all three blanks to mock a native module with async methods.

React Native

jest.mock('react-native', () => ({
  NativeModules: {
    DeviceInfo: {
      getDeviceName: jest.fn().mockResolvedValue([1]),
      getSystemVersion: jest.fn().mockResolvedValue([2]),
      isEmulator: jest.fn().mockResolvedValue([3])
    }
  }
}));

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

A'Galaxy S21'

B'12.0'

Cfalse

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using unquoted strings causing errors.

Using strings instead of booleans for isEmulator.

Async mocks should resolve to the correct types: strings for names and versions, boolean for isEmulator.