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?
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é.
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 .