Mocking native modules in React Native - Build, Publish & Deploy

Build & Publish - Mocking native modules

Performance Impact

Mocking native modules in React Native is mainly a development and testing technique. It does not affect the app's runtime frame rate or battery usage in production because mocks are replaced by real native modules when the app runs on devices.

During testing, mocks help speed up test execution by avoiding calls to slow native code. This reduces memory use and CPU load in test environments, but these benefits do not apply to the released app.

Optimization Tips

To keep your app running smoothly at 60fps, ensure that native modules are efficiently implemented and avoid heavy work on the JavaScript thread.

Mocks should only be used in test code, never in production builds. Use tools like Jest with proper mock setup to isolate native module behavior during tests.

Keep native module interfaces simple and asynchronous to prevent blocking the UI thread.

App Bundle Size and Startup Time

Mocking native modules does not increase your app bundle size because mocks are only included in test environments, not in production bundles.

Startup time is unaffected by mocks since the real native modules load normally in the released app.

iOS vs Android Differences

Both iOS and Android use native modules to bridge platform-specific code to React Native.

Mocking native modules works similarly on both platforms in JavaScript test environments.

However, native module implementations differ: iOS uses Objective-C or Swift, Android uses Java or Kotlin. Mocks abstract these differences during testing.

Store Review Guidelines

• Ensure your app does not include test mocks in production builds to avoid unexpected behavior.
• Follow Apple's Human Interface Guidelines and Google Play policies for native module usage, especially regarding permissions and user data.
• Sign your app properly with valid certificates (iOS) and keys (Android) to pass store reviews.
• Test your app thoroughly on real devices to confirm native modules work as expected before publishing.

Self-Check Question

Your app takes 5 seconds to load this screen. What's likely wrong?

• You might be calling native modules synchronously on the main thread, blocking UI rendering.
• Heavy native module initialization or expensive bridging calls could delay startup.
• Mocks are not used in production, so check if native modules are optimized and asynchronous.

Key Result

Mocking native modules improves test speed and reliability without affecting app performance or size in production. Always separate mocks from production code and optimize native module implementations for smooth UI and fast startup.

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