How to wait for Redux Persist to rehydrate before ending test

Question

I have the following code:

const App = () => {
    return (
        <Provider store={store}>
            <PersistGate persistor={persistor} loading={<Text>Loading!</Text>}>
                <ConnectedRootComponent />
            </PersistGate>
        </Provider>
    );
};

export default App;

which uses redux-persist to rehydrate state, and before this is complete, it will show what's sitting in the loading property. I have a Jest test (just the default one that comes with react native out of the box):

it('renders without crashing', () => {
  const rendered = renderer.create(<App />).toJSON();
  console.log("Rendering: " + JSON.stringify(rendered));
  expect(rendered).toBeTruthy();
});

but although the test passes I see that the actions that persist/PERSIST and persist/REHYDRATE are still occurring, and the value printed to the console in the test (the rendered output) is:

{
    "type": "Text",
    "props": {
        "accessible": true,
        "allowFontScaling": true,
        "ellipsizeMode": "tail"
    },
    "children": ["Loading!"]
}

What I want to do is wait until redux-persist has completed hydration, and then check the rendered value. How can I do this?

Answer 1

import React from 'react';
import App, {persistor} from '../App';

import renderer from 'react-test-renderer';

it('renders without crashing', (done) => {
  const appRendered = renderer.create(<App />);
  persistor.subscribe(function(){
      const rendered = appRendered.toJSON();
      console.log("Rendering: " + JSON.stringify(rendered));
      expect(rendered).toBeTruthy();
      done();
  });
});

you just need to export the persistor from App file and then use the above code to test. it works perfectly, i have tested.

You can notice that persistor object can subscribe with a callback, which gets executed when the redux store has rehydrated.