安装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屋！