Testing using Jest the implementation of Redux-persist with async-storage - react-native

Question

I have set up redux-persist with async-storage but my jest tests are failing with an error that refers to async code. The error is cryptic and I can't find what is causing it.
> app#0.0.1 test /Desktop/app
> jest --detectOpenHandles
ts-jest[main] (WARN) Replace any occurrences of "ts-jest/dist/preprocessor.js" or "<rootDir>/node_modules/ts-jest/preprocessor.js" in the 'transform' section of your Jest config with just "ts-jest".
ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.
at Object.get BackHandler [as BackHandler] (node_modules/react-native/Libraries/react-native/react-native-implementation.js:222:12)
at new NavigationContainer (node_modules/#react-navigation/native/dist/createAppContainer.js:190:35)
at constructClassInstance (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2996:22)
at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5896:9)
at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6674:20)
at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10041:16)
● Cannot log after tests are done. Did you forget to wait for something async in your test?
Attempted to log "The above error occurred in the <NavigationContainer> component:
in NavigationContainer (created by App)
in App
in PersistGate
in Provider
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/docs/error-boundaries.html to learn more about error boundaries.".
at CustomConsole.error (node_modules/#jest/console/build/CustomConsole.js:123:10)
at logCapturedError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7959:17)
at logError (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7995:9)
at update.callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8912:9)
at callCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7324:16)
at commitUpdateEffects (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7357:11)
at commitUpdateQueue (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7347:7)
at commitLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8231:15)
at commitAllLifeCycles (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9531:11)
at Object.invokeGuardedCallbackImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2057:14)
PASS __tests__/App-test.tsx
✓ renders correctly (11ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.118s, estimated 5s
Ran all test suites.
npm ERR! Test failed. See above for more details.
I have tried both of the jest implementation provided by react-native-community.
https://github.com/react-native-community/async-storage/blob/master/docs/Jest-integration.md
And this SO answer but I can't figure it out.
How to test Async Storage with Jest?
/**
* App-test.txt
*/
import 'react-native'
import renderer from 'react-test-renderer'
import React from 'react'
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/es/integration/react'
import mockAsyncStorage from '#react-native-community/async-storage/jest/async-storage-mock';
import App from '../App'
// Note: test renderer must be required after react-native.
import configureStore from './../app/store'
const { store, persistor } = configureStore()
jest.mock('#react-native-community/async-storage', () => mockAsyncStorage);
jest.mock('NativeModules', () => ({
UIManager: {
RCTView: () => ({
directEventTypes: {}
})
},
KeyboardObserver: {},
RNGestureHandlerModule: {
attachGestureHandler: jest.fn(),
createGestureHandler: jest.fn(),
dropGestureHandler: jest.fn(),
updateGestureHandler: jest.fn(),
State: {},
Directions: {}
}
}))
it('renders correctly', () => {
renderer.create(
<Provider store={store}>
<PersistGate persistor={persistor}>
<App />
</PersistGate>
</Provider>
)
})
my jest config in package.json
"jest": {
"setupFiles": ["./__mocks__/#react-native-community/async-storage.js"],
"preset": "react-native",
"transformIgnorePatterns": [
"/node_modules/(?!native-base)/"
],
"moduleFileExtensions": [
"ts",
"tsx",
"js"
],
"transform": {
"^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
"\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
"testPathIgnorePatterns": [
"\\.snap$",
"<rootDir>/node_modules/"
],
"cacheDirectory": ".jest/cache"
},
async-storage.js
import mockAsyncStorage from '#react-native-community/async-storage/jest/async-storage-mock';
jest.mock('#react-native-community/async-storage', () => mockAsyncStorage);