安装react-native-async-storage后，玩笑测试失败

Question

在我的react native项目中，我最近安装了节点模块react-native-async-storage，因为我收到有关不赞成使用'react-native'并将其移至单个模块的本地包的警告。

安装后，@react-native-community/async-storage我的笑话测试失败了。

首先与以下 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安装软件包时遇到了类似的情况

因此，transformIgnorePatterns我在package.json中添加了以下内容：

  "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.

我粘贴了屏幕截图以显示我的项目目录，以便您可以了解哪些配置文件可供使用。

如我所见，大多数相关主题都是关于模拟asyncStorage函数的，我尝试这样做没有任何运气。我在唯一的测试文件中添加了以下内容：

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其他配置建议的配置，也没有成功。

Answer 1

async-storage 已发布有关如何解决此问题的说明。

这是一个缩短版本：

1. 在您的项目根目录中，创建__mocks__/@react-native-community目录。
2. 在该文件夹中，创建一个async-storage.js文件。
3. 将以下内容复制粘贴到该文件中：

export default from '@react-native-community/async-storage/jest/async-storage-mock'

4. 享受！

我希望它可以帮助其他人。

Answer 2

您可以将其添加到您的测试文件中。

jest.mock("@react-native-community/async-storage", () =>
  require("@react-native-community/async-storage/jest/async-storage-mock"),
);

例如

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", () => {
    ...
  });
});

Answer 3

您需要将这段代码添加到您的 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(),
};

Answer 4

我找到了一种嘲笑 @react-native-community/async-storage

在项目的根目录（与dir相同的__test__目录）中，我创建了一个dir结构，如下所示：

_mocks__/@react-native-community/async-storage/index.js

在index.js中，我模拟了以下功能：

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)));
  },
}

在我的测试文件中，我添加了以下内容：

beforeAll(() => { 
  jest.mock('@react-native-community/async-storage');
})

dir结构的屏幕截图：

这成功了。我在这里找到了灵感：https : //github.com/react-native-community/react-native-async-storage/issues/39