如何在使用 firebase 的 react native 中进行单元测试？

Question

我对 jest 单元测试很陌生，所以像模拟模块这样的东西会让人困惑。

在 react native 中，有一个组件使用 firebase 数据库从给定的 ref 返回数据：

// when the data of the current user is available
userRef.child(user.uid).on('value', snap => {
  // check of val() consists data
  if (snap.val()) {
    let
      authUser = snap.val(),
      isPatient = authUser.type === "Patient",
      // We update the state object so that the component is re-rendered
      this.setState({
        // the ID of the current user
        authUserUID: user.uid,
        // the type of the current user (i.e. Doctor or Patient)
        authUserType: snap.val().type,
        // title of the dashboard based on the current user type
        activeTitle: snap.val().type === "Doctor" ? "My Patients" : "My Doctors",
      });
  }
});

我现在正在尝试使用此组件进行单元测试：

import 'react-native'
import React from 'react'
import renderer from 'react-test-renderer'
import LaunchScreen from "../../App/Containers/LaunchScreen";

test('LaunchScreen', () => {
  const tree = renderer.create( <LaunchScreen / > ).toJSON()
  expect(tree).toMatchSnapshot()
})

但它给出了一个奇怪的错误

在 iOS 上未原生找到 RNFirebase 核心模块，请确保您已将 RNFirebase pod 正确包含在您的项目中 Podfile 并已运行 pod install

我不知道，因为如果我运行它，firebase 确实会返回数据。那为什么说找不到RNFirebase呢？

谢谢

更新

其中一个答案给出了一个很好的分步说明，尽管它部分解决了提出的问题；错误仍然存​​在。例如;我现在收到这个新错误：

console.error node_modules\react-test-renderer\cjs\react-test-renderer.development.js:5530 组件出现上述错误： 在启动屏幕中

考虑在树中添加错误边界以自​​定义错误处理行为。

TypeError: _reactNativeFirebase2.default.app 不是函数

Answer 1

https://gist.github.com/himanshusinghs/bd86262ce3c9e6f4d691b5242de707ef

以上是包含 React Native Firebase 模拟的要点的链接。实施说明也在那里。我也在这里总结一下——

1. 您将模拟node_module，根据您的用例，有多种方法可以模拟。但由于您需要为几乎所有使用 Firebase 的组件模拟 Firebase，我们将实现 React Native Firebase 模块的全局模拟。

2. 在项目的根目录中创建一个__mocks__ 文件夹，与您的node_modules 文件夹相邻。

3. 现在在__mocks__ 目录中创建一个名为react-native-firebase.js 的文件。

4. 将上述要点中RNFirebaseMock.js 中的内容复制粘贴到您的react-native-firebase.js 文件中。

这是如何工作的？

Jest 具有自动模拟功能。现在，每次您使用 Jest 运行测试用例时，并且每当您的任何测试用例需要 react-native-firebase 模块时，Jest 都会首先查看 __mocks__ 文件夹并查看是否有一个 react-native-firebase.js 包含一些模拟实现需要的模块。

如果存在则 jest 将需要该模拟实现而不是原始模块，否则它将继续需要原始 react-native-firebase 模块。

注意事项

需要注意的是，我们在__mocks__文件夹中创建的模拟文件react-native-firebase.js的名称与实际react-native-firebase模块的安装文件夹名称相似。只需转到 node_modules 并向下滚动，直到找到 react-native-firebase 文件夹。

是的，模块的模拟实现的名称需要与模块本身的名称完全相同。

接下来要做的事情

恭喜您开始进行单元测试并为此选择了一个很棒的框架。相信我，测试react-native 或react 就是这样一个PITA (Pain in the Ass)，您应该考虑认真阅读Jest 文档并主要关注模拟部分。

稍后您可能会在为 react-native 或 react 设置 Jest 时遇到问题，文档将派上用场。

这里有一些系列教程和参考资料，帮助我开始使用 Jest 和单元测试 react 和 react-native -

1. Jest Documentation
2. Testing React and React Native using Jest/Enzyme setup
3. Reference article for Mocks, Stubs and Fakes
4. Testing Redux - P1
5. Testing Redux - P2
6. Testing Redux - P3

应用RNFirebaseMock后报错的解决方法

您现在遇到的错误是因为在您的模拟导出的default 下不存在名为app 的函数。所以让我们创建它。

转到您的 mocks 目录并打开 react-native-firebase-mock.js。寻找export default class RNFirebase，在那个类里面有几个没有实现的静态方法。在类中创建一个名为 app 的函数。

您的默认导出类现在应该如下所示 -

export default class RNFirebase {
  static initializeApp() {
    RNFirebase.firebase = new MockFirebase()
    RNFirebase.promises = []
    return RNFirebase.firebase
  }

  static reset() {
    RNFirebase.promises = []
    RNFirebase.firebase.databaseInstance = null
  }

  static waitForPromises() {
    return Promise.all(RNFirebase.promises)
  }

  static analytics () {}

  static app () {}
}

这应该可以解决问题，但是我相信您正在广泛使用 Firebase。在我的例子中，一个像我给你的那样简单的模拟实现为我做了诀窍。

如果您广泛使用 Firebase 的大多数 API，那么您肯定会遇到更多像您刚才看到的错误，因为我们尚未在 Firebase 模拟中为 RNFirebase 的所有 API 添加模拟实现。

如果出现这种情况，我建议您查看 Firebase 的 this 模拟实现，我猜它完全涵盖了 Firebase。

Answer 2

Jest 在节点中运行并且无法访问本机 API，因此您需要模拟 react-native-firebase / RNFirebase 模块才能使其工作。

见https://github.com/invertase/react-native-firebase/issues/162