如何使用firebase进行单元测试？

Question

我对单元测试非常陌生,所以像模拟模块这样的东西令人困惑.

在native 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组件中出现上述错误:在LaunchScreen中

考虑向树添加错误边界以自​​定义错误处理行为.

TypeError:_reactNativeFirebase2.default.app不是函数

Answer 1

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

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

1.您将嘲笑a node_module并且这样做有多种方式取决于您的用例.但是,由于几乎每个使用它的组件都需要模拟Firebase,我们将实现React Native Firebase模块的全局模拟.

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

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

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

这是怎么回事？

Jest有一个自动模拟功能.现在,每次使用Jest运行测试用例时,无论何时任何测试用例都需要react-native-firebase模块,Jest将首先查看__mocks__文件夹,看看是否react-native-firebase.js包含所需模块的一些模拟实现.

如果有,则jest将要求模拟实现而不是原始模块,否则它将继续需要原始react-native-firebase模块.

需要注意的事项

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

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

事情要做到这一点

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

稍后您可能会在设置Jest for react-native或做出反应时遇到问题,并且文档将派上用场.

下面是一些系列教程和参考,帮助我开始使用Jest和单元测试react和react-native-

1. 开玩笑文档
2. 使用Jest/Enzyme设置测试React和React Native
3. Mocks,Stubs和Fakes的参考文章
4. 测试Redux - P1
5. 测试Redux - P2
6. 测试Redux - P3

应用RNFirebaseMock后出现错误的解决方案

您现在得到的错误是因为app在default您的mock的导出下不存在名为的函数.所以让我们创造它.

转到您的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,那么您必然会遇到更多错误,因为我们还没有为RNFirebaseFirebase模拟中的所有API添加模拟实现.

如果出现这种情况,我建议您查看Firebase的这个模拟实现,我想完全覆盖Firebase.

Answer 2

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

请参阅https://github.com/invertase/react-native-firebase/issues/162