web-dev-qa-db-fra.com

Comment attendre que Redux Persist se réhydrate avant de terminer le test

J'ai le code suivant:

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

export default App;

qui utilise redux-persist pour réhydrater l’état, et avant que cela soit terminé, il montrera ce qui est assis dans la propriété loading. J'ai un test Jest (juste celui par défaut fourni avec react native from the box):

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

mais bien que le test réussisse, je constate que les actions qui persist/PERSIST et persist/REHYDRATE se produisent toujours et que la valeur imprimée sur la console dans le test (la sortie rendue) est:

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

Ce que je veux faire, c'est attendre que redux-persist ait terminé l'hydratation, puis vérifier la valeur rendue. Comment puis-je faire ceci?

reactjsreact-nativejestjsredux-persist
14
user4184113
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();
  });
});

vous avez juste besoin de export la persistor à partir du fichier d'application, puis utilisez le code ci-dessus pour tester. cela fonctionne parfaitement, j'ai testé.

Vous pouvez remarquer que l’objet persistor peut s’abonner à un rappel, qui s’exécute lorsque le magasin redux est réhydraté.

2
Inus Saha

Vous pouvez simuler PersistGate pour toujours renvoyer props.children, votre test pourra alors vérifier la valeur rendue.

Voici comment créer la maquette:

jest.mock('redux-persist/integration/react', () => ({
  PersistGate: props => props.children,
}))

Crédits .

0
Jordan Enev