Redux-persist: Unable to run Jest with redux-persist

[ethanneff]

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

      at handleResolved (node_modules/promise/lib/core.js:113:3)
      at handle (node_modules/promise/lib/core.js:109:3)
      at finale (node_modules/promise/lib/core.js:175:5)
      at resolve (node_modules/promise/lib/core.js:162:3)
      at node_modules/promise/lib/core.js:203:5
      at node_modules/react-native/Libraries/Storage/AsyncStorage.js:53:11
      at node_modules/react-native/jest/setup.js:101:46
/Users/ethanneff/Dropbox/active/dev/react-native/example/node_modules/promise/lib/core.js:113
  require('asap/raw')(function () {

[ethanneff]

I gave up and started using redux-offline instead. It's friendlier with Jest and has redux-persist built in.

[BoKKeR]

I have somewhat the same error:

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)

and cant find any way to fix it or track down, it came up after I implemented redux-persist with async-storage storage.

This is the test that actually passes but it ultimately fails because of the error above:

it('renders correctly', () => {
  renderer.create(
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  )
}) 

[rochapablo]

Same here

app-test

it('renders correctly', () => {
    renderer.create(<App />);
});

app

return (
    <Provider store={store}>
    <PersistGate loading={<Loading />} persistor={persistor}>
        <AppContainer />
    </PersistGate>
    </Provider>
);

test response

RUNS  __tests__/src/app-test.tsx
/app/node_modules/promise/lib/core.js:113
  require('asap/raw')(function () {
                     ^

TypeError: require(...) is not a function
    at handleResolved (/app/node_modules/promise/lib/core.js:113:22)
    at handle (/app/node_modules/promise/lib/core.js:109:3)
    at finale (/app/node_modules/promise/lib/core.js:175:5)
    at resolve (/app/node_modules/promise/lib/core.js:162:3)
    at /app/node_modules/promise/lib/core.js:203:5
    at /app/node_modules/react-native/Libraries/Storage/AsyncStorage.js:53:11
    at /app/node_modules/react-native/jest/setup.js:104:46
    at process._tickCallback (internal/process/next_tick.js:61:11)

"react": "16.8.6",
"react-native": "^0.59.10",
"redux-persist": "^5.10.0",
"jest": "^24.8.0",

[kopax]

This seems fixed.

[ethanneff]

Yeah this is almost a year old. It's been fixed for me for quite some time (using the latest redux, jest, and redux-persist)

[kopax]

Well, I was having a different user because I was using AsyncStorage, and in fact, it is not solved if I use localStorage or sessionStorage.

I use [email protected] and [email protected]. What else have you done in order to configure it properly?

[ethanneff]

I have a React Native hybrid app for both Mobile and Web so my config may be odd.

Dependencies

"react": "16.12.0",
"react-dom": "16.12.0",
"react-native": "0.61.5",

"jest": "24.9.0",
"babel-jest": "24.9.0",
"@types/jest": "24.0.25",

"redux": "4.0.5",
"redux-persist": "6.0.0",
"redux-thunk": "2.3.0",

Mobile storage

import NativeStorage from "@react-native-community/async-storage";
export const Storage = NativeStorage;

Web storage

import LocalStorage from "redux-persist/lib/storage";
export const Storage = LocalStorage;

Persist

import { persistReducer, persistStore } from "redux-persist";
import { Storage } from "../../conversions";

const persistedReducer = persistReducer(persistConfig, reducers);
export const store = createStore(persistedReducer, enhancers);
const persistor = persistStore(store);

[kopax]

Thanks for sharing your configuration.

Unfortunately, I use expo and import NativeStorage from "@react-native-community/async-storage"; is not working with expo, we must stick to react-native implementation. I am aware it will be removed.

I sorted the things out by adding a await new Promise((resolve) => setTimeout(resolve, 1)); after rendering the tree. otherwise, tree seems not to be rendered entirely due to the async nature of AsyncStorage.

I wonder how the react-native-community version solved the issue.

[alfarodarwaynejay]

Thanks for sharing your configuration.

Unfortunately, I use expo and import NativeStorage from "@react-native-community/async-storage"; is not working with expo, we must stick to react-native implementation. I am aware it will be removed.

I sorted the things out by adding a await new Promise((resolve) => setTimeout(resolve, 1)); after rendering the tree. otherwise, tree seems not to be rendered entirely due to the async nature of AsyncStorage.

I wonder how the react-native-community version solved the issue.

@kopax what do you mean by adding await new Promise((resolve) => setTimeout(resolve, 1)); after rendering the tree. Where to add? Which file? Sorry I'm new to react-native...

[UNIDY2002]

I sorted the things out by adding a await new Promise((resolve) => setTimeout(resolve, 1)); after rendering the tree. otherwise, tree seems not to be rendered entirely due to the async nature of AsyncStorage.

Nice solution!

I also encountered this problem today and solved by adding await new Promise((resolve) => setTimeout(resolve, 1000));.

With reference to the console output, I then noticed that a probably neater solution is available - react-test-renderer provides a function act to wrap such (async...? according to my understanding) components, like this:

it("renders correctly", async () => {
    await act(async () => {
        renderer.create(<App />);
    });
});

Currently I do not know what happens behind, but at least it seems to solve the problem in my project.