安装react-native-async-storage后,玩笑测试失败 [英] jest test fails after installing react-native-async-storage
问题描述
在我的react native项目中,我最近安装了节点模块react-native-async-storage,因为我收到有关不赞成使用'react-native'并将其移至单个模块的本机软件包的警告.
In my react native project, I have recently installed node module react-native-async-storage as I received warnings about the native package from 'react-native' being deprecated and moved out to an individual module.
在安装@react-native-community/async-storage
之后,我的笑话测试失败了.
After installing the @react-native-community/async-storage
my jest test is failing.
首先跟随error: unexpected token at position 0
在文件中:
persistence.js
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
}
所以我认为这与某些babel配置有关,因为我上次从@ react-native-community安装软件包时遇到了类似的情况
So I assume this is related to some babel configuration, since i encountered something similar last time i installed a package from the @react-native-community
因此,在我的package.json中的transformIgnorePatterns
中,我添加了以下内容:
So, to the transformIgnorePatterns
in my package.json I added following:
"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)"
]
}
但是现在我遇到了一个新错误. @RNCommunity/AsyncStorage: NativeModule.RCTAsyncStorage is null.
But now I'm getting a new error. @RNCommunity/AsyncStorage: NativeModule.RCTAsyncStorage is null.
我正在粘贴屏幕快照以显示我的项目目录,以便您可以了解哪些配置文件可供使用.
I'm pasting the screenshot to show my project dir so that you can get an idea about which config files a have available to mess with.
正如我所看到的,大多数相关主题都是关于模拟asyncStorage函数的,我尝试这样做没有任何运气.我在唯一的测试文件中添加了以下内容:
As I can see most related topic are about mocking the asyncStorage function I've tried to do so, without any luck. I added following to my one and only tests file:
import MockAsyncStorage from 'mock-async-storage';
beforeAll(() => {
const mockImpl = new MockAsyncStorage()
jest.mock('AsyncStorage', () => mockImpl)
snapshot = renderer.create(<App />);
})
afterAll(() => {
jest.unmock('AsyncStorage')
});
仍然没有雪茄.我曾尝试添加setupFilesAfterEnv.js
带有其他答案建议的配置,但也没有成功.
Still no cigar. I have tried adding a setupFilesAfterEnv.js
with configurations as other answer suggests, also didn't do the trick.
推荐答案
我找到了模拟@react-native-community/async-storage
在我项目的根目录(与__test__
目录相同的目录)中,我创建了这样的目录结构:
in root of my project, (same dir as __test__
dir), I created a dir structure like this:
_mocks__/@react-native-community/async-storage/index.js
在index.js中,我模拟了以下功能:
in index.js I mocked the following functions:
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)));
},
}
在我的测试文件中,我添加了以下内容:
in my test file i added this:
beforeAll(() => {
jest.mock('@react-native-community/async-storage');
})
目录结构的屏幕截图:
这成功了.我在这里找到了灵感: https://github.com /react-native-community/react-native-async-storage/issues/39
This did the trick. I found inspiration here: https://github.com/react-native-community/react-native-async-storage/issues/39
这篇关于安装react-native-async-storage后,玩笑测试失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!