Dans mon projet natif react, j'ai récemment installé le module de nœud react-native-async-storage car j'ai reçu des avertissements concernant le package natif de 'react-native' étant obsolète et déplacé vers un module individuel.
Après avoir installé le @react-native-community/async-storage mon test de plaisanterie échoue.
d'abord avec l' error: unexpected token at position 0 suivante error: unexpected token at position 0
dans le fichier:
persistence.js
import MockAsyncStorage from 'mock-async-storage';
beforeAll(() => {
const mockImpl = new MockAsyncStorage()
jest.mock('AsyncStorage', () => mockImpl)
snapshot = renderer.create(<App />);
})
afterAll(() => {
jest.unmock('AsyncStorage')
});
Je suppose donc que cela est lié à une configuration de babel, car j'ai rencontré quelque chose de similaire la dernière fois que j'ai installé un package de la @ react-native-community
Donc, aux transformIgnorePatterns dans mon package.json, j'ai ajouté ce qui suit:
"jest": {
"preset": "react-native",
"transformIgnorePatterns": [
"node_modules/(?!react-native|@react-native-community/async-storage|native-base-shoutem-theme|@shoutem/animation|@shoutem/ui|tcomb-form-native)"
]
}
Mais maintenant, j'obtiens une nouvelle erreur. @RNCommunity/AsyncStorage: NativeModule.RCTAsyncStorage is null.
Je colle la capture d'écran pour afficher le répertoire de mon projet afin que vous puissiez avoir une idée des fichiers de configuration disponibles. 
Comme je peux le voir, la plupart des sujets connexes concernent la moquerie de la fonction asyncStorage, j'ai essayé de le faire, sans aucune chance. J'ai ajouté ce qui suit à mon seul et unique fichier de tests:
import AsyncStorage from '@react-native-community/async-storage';
storeData = async ({ key, value }) => {
try {
await AsyncStorage.setItem(key, value);
} catch (error) {
// Error saving data
}
}
retrieveData = async (key) => {
try {
const value = await AsyncStorage.getItem(key);
if (value !== null) {
// Our data is fetched successfully
return value;
}
} catch (error) {
// Error retrieving data
}
}
module.exports = {
storeData,
retrieveData
}
Toujours pas de cigare. J'ai essayé d'ajouter un setupFilesAfterEnv.js avec des configurations comme le suggère une autre réponse, mais je n'ai pas non plus fait l'affaire.
5 Réponses :
Vous devez ajouter ce morceau de code à votre setupTestFrameworkScriptFile
import { NativeModules } from 'react-native';
NativeModules.RNCAsyncStorage = {
getItem: jest.fn(),
setItem: jest.fn(),
removeItem: jest.fn(),
mergeItem: jest.fn(),
clear: jest.fn(),
getAllKeys: jest.fn(),
flushGetRequests: jest.fn(),
multiGet: jest.fn(),
multiSet: jest.fn(),
multiRemove: jest.fn(),
multiMerge: jest.fn(),
};
Hey! :) Quel fichier est mon setupTestFrameworkScriptFile? Où est-il situé ?
Voir ce lien jestjs.io/docs/en/configuration , si vous êtes maintenant sur Jest 24, cela devrait être setupFilesAfterEnv
Cela n'a pas fonctionné, mais l'erreur que je vois concerne @RNCommunity/AsyncStorage: NativeModule.RCTAsyncStorage is null. ce qui sonne un peu différent du RNCAsyncStorage auquel vous faites référence. Mon module est importé comme ceci: import AsyncStorage from '@react-native-community/async-storage';
Eh bien, si vous vérifiez le code source, vous pouvez voir que l'erreur provient de: const {NativeModules} = require ('react-native'); const RCTAsyncStorage = NativeModules.RNC_AsyncSQLiteDBStorage || NativeModules.RNCAsyncStorage; if (! RCTAsyncStorage) {throw new Error (`@ RNCommunity / AsyncStorage: NativeModule.RCTAsyncStorage est null. Donc, se moquer de l'un de ces deux dans votre test devrait le faire. github.com/react-native-community/react-native-async -stockage /…
Eh bien, bon point. Mais j'ai confirmé que j'étais sur jst 24+ et j'ai ajouté setupFilesAfterEnv à la racine, comme le précise le document. Ne semble pas fonctionner sur le npm test ou le yarn test . Donc à la fin je suis retourné à la méthode simulée . qui a finalement fonctionné.
J'ai trouvé un moyen de me moquer de la @react-native-community/async-storage
à la racine de mon projet, (même __test__ que __test__ dir), j'ai créé une structure dir comme celle-ci:
__mocks__/@react-native-community/async-storage/index.js
dans index.js, je me suis moqué des fonctions suivantes:
beforeAll(() => {
jest.mock('@react-native-community/async-storage');
})
dans mon fichier de test, j'ai ajouté ceci:
let cache = {};
export default {
setItem: (key, value) => {
return new Promise((resolve, reject) => {
return (typeof key !== 'string' || typeof value !== 'string')
? reject(new Error('key and value must be string'))
: resolve(cache[key] = value);
});
},
getItem: (key, value) => {
return new Promise((resolve) => {
return cache.hasOwnProperty(key)
? resolve(cache[key])
: resolve(null);
});
},
removeItem: (key) => {
return new Promise((resolve, reject) => {
return cache.hasOwnProperty(key)
? resolve(delete cache[key])
: reject('No such key!');
});
},
clear: (key) => {
return new Promise((resolve, reject) => resolve(cache = {}));
},
getAllKeys: (key) => {
return new Promise((resolve, reject) => resolve(Object.keys(cache)));
},
}
Capture d'écran de la structure du répertoire: 
Cela a fait l'affaire. J'ai trouvé l'inspiration ici: https://github.com/react-native-community/react-native-async-storage/issues/39
async-storage a publié des instructions sur la façon de résoudre ce problème.
Voici une version abrégée:
export default from '@react-native-community/async-storage/jest/async-storage-mock'
J'espère que cela peut aider les autres.
Le lien est 404 malheureusement
@typewriter Merci. J'ai mis à jour le lien
C'est __mocks__/ avec deux __mocks__/ de soulignement, pas un. Les instructions ont peut-être été mises à jour depuis que vous avez publié ceci, bien sûr. Mais juste pour info @FrancoisNadeau
@MattFletcher Merci. Je ne crois pas que les documents aient changé, c'était un problème de balisage avec ce que j'ai écrit.
Modifier Ignorer ma réponse, faites simplement ceci à la place: https://github.com/react-native-community/async-storage/blob/LEGACY/docs/Jest-integration.md
Merci @Krizzo
Une autre version Jest basée sur @Rasmus Puls mais avec des fonctions Jest - à ajouter à votre fichier Jest Mocks.
jest.mock('@react-native-community/async-storage', () => {
let cache = {};
return {
setItem: jest.fn((key, value) => {
return new Promise((resolve, reject) => {
return (typeof key !== 'string' || typeof value !== 'string')
? reject(new Error('key and value must be string'))
: resolve(cache[key] = value);
});
}),
getItem: jest.fn((key, value) => {
return new Promise((resolve) => {
return cache.hasOwnProperty(key)
? resolve(cache[key])
: resolve(null);
});
}),
removeItem: jest.fn((key) => {
return new Promise((resolve, reject) => {
return cache.hasOwnProperty(key)
? resolve(delete cache[key])
: reject('No such key!');
});
}),
clear: jest.fn((key) => {
return new Promise((resolve, reject) => resolve(cache = {}));
}),
getAllKeys: jest.fn((key) => {
return new Promise((resolve, reject) => resolve(Object.keys(cache)));
}),
}
});
Hé, pourquoi ne pas en utiliser un fourni dans le dépôt du stockage Async?
Vous pouvez l'ajouter à votre fichier de test.
import React from "react";
jest.mock("@react-native-community/async-storage", () =>
require("@react-native-community/async-storage/jest/async-storage-mock"),
);
describe("Example test", () => {
it("should work", () => {
...
});
});
Par exemple
jest.mock("@react-native-community/async-storage", () =>
require("@react-native-community/async-storage/jest/async-storage-mock"),
);