Jest test fails because of incorrectly loaded react native modules

[itsramiel]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React Native

Amplify APIs

DataStore

Amplify Version

v6

Amplify Categories

Not applicable

Backend

None

Environment information

# Put output below this line
  System:
    OS: macOS 14.3.1
    CPU: (14) arm64 Apple M3 Max
    Memory: 142.31 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.11.1/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    Watchman: 2024.01.22.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 123.0.6312.58
    Safari: 17.3.1
  npmPackages:
    @aws-amplify/react-native: ^1.0.22 => 1.0.22
    @azure/core-asynciterator-polyfill: ^1.0.2 => 1.0.2
    @babel/core: ^7.20.0 => 7.24.3
    @babel/preset-env: ^7.20.0 => 7.24.3
    @babel/runtime: ^7.20.0 => 7.24.1
    @react-native-async-storage/async-storage: ^1.23.1 => 1.23.1
    @react-native-community/netinfo: ^11.3.1 => 11.3.1
    @react-native/babel-preset: 0.73.21 => 0.73.21
    @react-native/eslint-config: 0.73.2 => 0.73.2
    @react-native/metro-config: 0.73.5 => 0.73.5
    @react-native/typescript-config: 0.73.1 => 0.73.1
    @types/react: ^18.2.6 => 18.2.69
    @types/react-test-renderer: ^18.0.0 => 18.0.7
    HelloWorld:  0.0.1
    aws-amplify: ^6.0.21 => 6.0.21
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/enable-oauth-listener:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/data:  undefined ()
    aws-amplify/data/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    babel-jest: ^29.6.3 => 29.7.0
    eslint: ^8.19.0 => 8.57.0
    jest: ^29.6.3 => 29.7.0
    prettier: 2.8.8 => 2.8.8
    react: 18.2.0 => 18.2.0
    react-native: 0.73.6 => 0.73.6
    react-native-get-random-values: ^1.11.0 => 1.11.0
    react-test-renderer: 18.2.0 => 18.2.0
    typescript: 5.0.4 => 5.0.4
  npmGlobalPackages:
    @aws-amplify/cli: 12.3.0
    corepack: 0.23.0
    eas-cli: 7.3.0
    npm: 10.2.4
    yarn: 1.22.21

Describe the bug

When testing a react native app with jest, I get the following error message:
Ensure @react-native-async-storage/async-storage is installed and linked.

with the source being at loadAsyncStorage (node_modules/@aws-amplify/react-native/src/moduleLoaders/loadAsyncStorage.ts:22:15)

The issue is that when loading the module, the module is loaded with require().default:

amplify-js/packages/react-native/src/moduleLoaders/loadAsyncStorage.ts

Lines 10 to 11 in 2b71e29

	const module = require('@react-native-async-storage/async-storage')
	?.default as AsyncStorageStatic;

But the mock that is shipped with react-native-async-storage/async-storage is a common js object with no default property, so require('@react-native-async-storage/async-storage')?.default is always undefind in jest, but require('@react-native-async-storage/async-storage') is defined

Expected behavior

I expect to not get the error Ensure @react-native-async-storage/async-storage is installed and linked. since it is installed and mocked properly according to the library docs.

Reproduction steps

1. clone https://github.com/itsramiel/AmplifyJestRepro
2. Install deps with yarn
3. Run yarn test and check the error

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[itsramiel]

Is there any reason why const module = require('@react-native-async-storage/async-storage')?.default as AsyncStorageStatic; is not imported as an esm import import AsyncStorage from 'react-native-async-storage/async-storage' and then assigning AsyncStorage to module?

[ashwinkumar6]

Hi @itsramiel,
Thanks for raising the issue, this is a duplicate of #12829
Could you try adding a mock as mentioned on the linked issue

[cwomack]

@itsramiel, wanted to follow up and see if you had a chance to try adding a mock as mentioned in the issue referenced in @ashwinkumar6's comment. Let us know if you're still having this issue and if we can help, thanks!

[itsramiel]

Yeah I already use the following mock:

jest.mock('@aws-amplify/react-native', () => {
  const original = jest.requireActual('@aws-amplify/react-native');
  return {
    ...original,
    loadAsyncStorage: jest.fn(),
    loadNetInfo: jest.fn(() => ({
      addEventListener: jest.fn(),
    })),
  };
});

but I was wondering if there is a plan to handle that internally