Cfrgtkky

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?

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.

You could mock PersistGate to always return props.children, then your test can check the rendered value.

Here's how to create the mock:

jest.mock('redux-persist/integration/react', () => ({

  PersistGate: props => props.children,

}))

Credits.