Mocking native modules in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does mocking native modules mean in React Native testing?

Mocking native modules means creating fake versions of native code components so tests can run without relying on actual device features or native implementations.

beginner

Why do we mock native modules in React Native tests?

We mock native modules to isolate JavaScript code from native code, making tests faster, more reliable, and easier to run on any environment without device dependencies.

beginner

Which Jest function is commonly used to mock native modules in React Native?

The Jest function jest.mock() is used to replace native modules with mock implementations during testing.

intermediate

How do you mock the React Native native module 'AsyncStorage' in a test?

You can mock AsyncStorage by calling jest.mock('@react-native-async-storage/async-storage', () => mockImplementation) where mockImplementation fakes AsyncStorage methods like getItem and setItem.

intermediate

What is a key benefit of mocking native modules when running tests on a CI/CD pipeline?

Mocking native modules allows tests to run in environments without real devices or emulators, ensuring tests pass consistently and quickly in automated pipelines.

What is the main purpose of mocking native modules in React Native?

A To improve app performance on devices

B To simulate native functionality for testing without real devices

C To add new features to native modules

D To convert native code to JavaScript

Mocking native modules simulates native features so tests can run without needing actual devices.

Which Jest method is used to replace a native module with a mock?

A jest.mock()

B jest.clearAllMocks()

C jest.fn()

D jest.spyOn()

jest.mock() replaces modules with mocks during testing.

If a native module is not mocked, what can happen during tests?

A Tests run faster

B Tests automatically mock the module

C Tests ignore native modules

D Tests may fail or hang due to missing native code

Without mocking, tests can fail because native code is unavailable in the test environment.

What is a common way to mock AsyncStorage in React Native tests?

A Use jest.mock() with a fake AsyncStorage object

B Call AsyncStorage.clear() before tests

C Import AsyncStorage from a different package

D Use real AsyncStorage on device

jest.mock() with a fake AsyncStorage lets tests run without real storage.

Why is mocking native modules important for CI/CD pipelines?

A It improves app startup time

B It reduces the size of the app bundle

C It allows tests to run without real devices or emulators

D It enables live debugging on devices

Mocking lets tests run in automated environments without device dependencies.

Explain how and why you would mock a native module in a React Native test.

Think about replacing native code with fake code during tests.

Describe the benefits of mocking native modules when running tests in a continuous integration system.

Consider what happens when no real device is available.

Practice

1. What is the main purpose of mocking native modules in React Native testing?

easy

A. To replace native code with fake implementations for easier testing

B. To speed up the app in production

C. To add new native features automatically

D. To convert JavaScript code into native code

Solution

1. Step 1: Understand mocking concept

   Mocking replaces real native code with fake versions to isolate tests from native dependencies.

2. Step 2: Identify purpose in testing

   This helps test JavaScript logic without needing actual native modules running.

3. Final Answer:

   To replace native code with fake implementations for easier testing -> Option A

4. Quick Check:

   Mocking = Replace native code for testing [OK]

Hint: Mocking means faking native code to test JS easily [OK]

Common Mistakes:

• Thinking mocking speeds up production
• Confusing mocking with adding features
• Believing mocking converts JS to native

2. Which syntax correctly mocks a native module named NativeModuleExample using Jest?

easy

A. mock('NativeModuleExample', () => ({ method: jest.fn() }));

B. jest.mock('NativeModuleExample', { method: jest.fn });

C. jest.mock NativeModuleExample { method: jest.fn() };

D. jest.mock('NativeModuleExample', () => ({ method: jest.fn() }));

Solution

1. Step 1: Recall Jest mock syntax

   Jest uses jest.mock(moduleName, factoryFunction) to mock modules.

2. Step 2: Check correct usage

   jest.mock('NativeModuleExample', () => ({ method: jest.fn() })); correctly uses jest.mock with a factory returning an object with mocked methods.

3. Final Answer:

   jest.mock('NativeModuleExample', () => ({ method: jest.fn() })); -> Option D

4. Quick Check:

   jest.mock with factory function = jest.mock('NativeModuleExample', () => ({ method: jest.fn() })); [OK]

Hint: Use jest.mock('module', () => ({})) syntax [OK]

Common Mistakes:

• Omitting jest. before mock
• Passing object directly instead of factory function
• Using wrong parentheses or braces

3. Given this mock setup:

jest.mock('NativeModule', () => ({ getValue: () => Promise.resolve('mocked') }));

NativeModule.getValue().then(result => console.log(result));

What will be logged to the console?

medium

A. Promise { 'mocked' }

B. undefined

C. mocked

D. Error: getValue is not a function

Solution

1. Step 1: Understand the mock function

   The mocked getValue returns a resolved Promise with string 'mocked'.

2. Step 2: Analyze the then callback

   The then callback logs the resolved value, which is 'mocked'.

3. Final Answer:

   mocked -> Option C

4. Quick Check:

   Promise resolves to 'mocked' logged [OK]

Hint: Promises resolve before then logs value [OK]

Common Mistakes:

• Expecting the Promise object to be logged
• Forgetting to return a Promise in mock
• Confusing undefined with resolved value

4. You wrote this mock:

jest.mock('NativeModule', () => ({ getData: jest.fn }));

But NativeModule.getData.mockReturnValue('test') throws an error. What is the problem?

medium

A. jest.mock cannot mock functions

B. jest.fn is missing parentheses, so getData is not a mock function instance

C. NativeModule is not imported correctly

D. getData should return a Promise, not jest.fn

Solution

1. Step 1: Check jest.fn usage

   jest.fn is a function that must be called as jest.fn() to create a mock function.

2. Step 2: Identify error cause

   Without parentheses, getData is assigned the function jest.fn itself, not a mock function instance, causing error when using mock methods like mockReturnValue.

3. Final Answer:

   jest.fn is missing parentheses, so getData is not a mock function instance -> Option B

4. Quick Check:

   Use jest.fn() to create mock function [OK]

Hint: Always call jest.fn() with parentheses [OK]

Common Mistakes:

• Assigning jest.fn without ()
• Assuming jest.mock auto-mocks functions
• Ignoring import errors

5. You want to mock a native module method fetchData that normally returns a Promise resolving to an object. Which mock implementation correctly simulates this behavior?

hard

A. jest.mock('NativeModule', () => ({ fetchData: () => Promise.resolve({ id: 1, name: 'Test' }) }));

B. jest.mock('NativeModule', () => ({ fetchData: () => ({ id: 1, name: 'Test' }) }));

C. jest.mock('NativeModule', () => ({ fetchData: jest.fn(() => 'Test') }));

D. jest.mock('NativeModule', () => ({ fetchData: jest.fn(() => Promise.reject('Error')) }));

Solution

1. Step 1: Understand original method behavior

   fetchData returns a Promise resolving to an object, so mock must do the same.

2. Step 2: Evaluate options

   jest.mock('NativeModule', () => ({ fetchData: () => Promise.resolve({ id: 1, name: 'Test' }) })); returns Promise.resolve with correct object, matching original behavior.

3. Final Answer:

   jest.mock('NativeModule', () => ({ fetchData: () => Promise.resolve({ id: 1, name: 'Test' }) })); -> Option A

4. Quick Check:

   Mock Promise resolve with object = jest.mock('NativeModule', () => ({ fetchData: () => Promise.resolve({ id: 1, name: 'Test' }) })); [OK]

Hint: Mock async methods with Promise.resolve returning expected data [OK]

Common Mistakes:

• Returning object directly instead of Promise
• Mocking with rejected Promise when success expected
• Returning string instead of object