jest + @testing-library/react-native fails with Authenticator

[PavelPolyakov]

Before creating a new issue, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have tried disabling all browser extensions or using a different browser
• [X] I have tried deleting the node_modules folder and reinstalling my dependencies
• [X] I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React Native

Which UI component?

Authenticator

How is your app built?

expo

What browsers are you seeing the problem on?

No response

Please describe your bug.

I want to have expo + jest + ts + @testing-library/react-native + @aws-amplify/ui-react-native to work together. Everything works, until we start using Authenticator. I consider this important, since @testing-library/react-native has high adoption.

What's the expected behaviour?

Expected behaviour, that it's possible to have the setup where render from @testing-library/react-native works together with Authenticator.

Help us reproduce the bug!

I prepared a repo where it is reproduced: https://github.com/PP-etc/aws-amplify-bug-reproduction . It's a minimal expo application + all of the mentioned above. As soon as I include the Authenticator, the flow breaks and can not be fixed.

Code Snippet

No response

Additional information and screenshots

No response

[calebpollman]

Hi @PavelPolyakov. Noticed your reproduction repo does not have a test command, can you please double check it?

[PavelPolyakov]

hi @calebpollman ,

Thanks for the prompt response. I added the test, so you can run npm test. There is also a README.md with the broader context.

What I run

npx jest src/__tests__/render-works.test.tsx
npx jest src/__tests__/render-fails.test.tsx

[calebpollman]

Thanks for updating the example @PavelPolyakov. Believe the issue is with the provided jest configuration (unrelated to @testing-library/react-native), specifically with the transformIgnorePatterns value. Was able to get jest running in the repro by updating jest.config.js to:

module.exports = {
  preset: "jest-expo",
  // add `@aws-amplify/ui-react-native`, `@aws-sdk/.*` and `uuid`
  transformIgnorePatterns: [
    "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg|@aws-amplify/ui-react-native|@aws-sdk/.*|uuid)",
  ],
  // add `setupFiles`
  setupFiles: ["<rootDir>/jest.setup.js"],
  setupFilesAfterEnv: ["@testing-library/jest-native/extend-expect"],
};

Along with the addition of jest.setup.js:

// required due to `aws-amplify`
global.navigator = {
  ClientDevice_Browser: jest.fn(Promise.resolve),
};

Additionally you may need to mock some 3rd party libs, when using your example added these mocks that are used in the Amplify UI code base.

As this is not an issue with @aws-amplify/ui-react-native going to close this issue. Hope the above information helps!

[PavelPolyakov]

Thank you @calebpollman , I've applied your suggestions and now it works fine: https://github.com/PP-etc/aws-amplify-bug-reproduction/commit/8215d9af8f0163b9e974c28d34642cf7461534b0 .

For those who will be interested in the resolution — I've updated the repository.