Mocking native modules in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What happens when you mock a native module in React Native?

In React Native testing, what is the main effect of mocking a native module?

A The native module's real implementation is replaced with a fake one during tests.

B The native module is removed from the app permanently.

C The native module runs twice, once real and once mocked.

D The app crashes because native modules cannot be mocked.

💡 Hint

Think about how tests isolate parts of the app.

Mocking replaces the real native module with a fake version so tests can run without depending on native code.

❓ ui_behavior

intermediate

Mocking a native module affects UI behavior how?

If you mock a native module that provides device location, what happens to UI components relying on that location during tests?

A They display the real device location regardless of mocking.

B They show an error because location is unavailable.

C They receive the mocked location data instead of real device location.

D They freeze and do not update.

💡 Hint

Mocking controls the data returned by the module.

When mocked, UI components get the fake data provided by the mock, not the real device data.

❓ lifecycle

advanced

When is a native module mock applied in React Native tests?

At what point during the test lifecycle is a native module mock typically applied?

A Before the app or component is rendered in the test.

B Only when the app is built for production.

C After the test finishes running.

D During the app's runtime on a real device.

💡 Hint

Mocks must be ready before code uses the module.

Mocks are set up before rendering so the tested code uses the fake module instead of the real one.

🔧 Debug

advanced

Why does a test fail when mocking a native module incorrectly?

You mocked a native module but your test fails with 'undefined is not a function' error. What is the likely cause?

A The app code has a syntax error unrelated to mocking.

B The native module cannot be mocked at all.

C The test environment is missing a device connection.

D The mock does not provide the expected function or method the code calls.

💡 Hint

Check what your mock returns or defines.

If the mock lacks a function the code expects, calling it causes an error.

❓ navigation

expert

How does mocking native modules affect navigation in React Native tests?

You mock a native module that controls hardware back button behavior. How does this affect navigation testing?

A Navigation stops working because the real back button handler is missing.

B The back button behavior is controlled by the mock, allowing predictable navigation tests.

C The app crashes on back button press during tests.

D The back button triggers both real and mocked handlers simultaneously.

💡 Hint

Mocks let you simulate hardware behavior in tests.

Mocking the back button module lets tests simulate back presses and check navigation without real hardware.

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