使用 Jest、Firebase 和 React-Native 运行测试

Question

我正在尝试成功运行 react-native 安装附带的锅炉位置 App-test.js 测试。我已经看到这个测试在其他项目中“开箱即用”，但是，由于我们与 Firebase SDK 的集成，我的测试失败了。长期目标是构建一个测试套件来模拟对我们的 firebase SDK 的调用（想探索以下解决方案：https : //medium.com/stories-from-upstatement/jest-mocks-roasting-on- an-open-firestore-36fa55b76953，你如何使用 Jest 模拟 Firebase Firestore 方法？），但我被困在了开门上。

这是我在尝试运行以下命令时收到的初始错误：

npm test __tests__/App-test.js

错误：

import { getFirebaseRoot } from './internal/registry/namespace';
export default () => ({
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import React from 'react';
    > 2 | import firebase from '@react-native-firebase/app';
        | ^
      3 | import analytics from '@react-native-firebase/analytics';
      4 | import '@react-native-firebase/auth';
      5 | import '@react-native-firebase/database';

看来我们的 App.js 文件是罪魁祸首。

import React from 'react';
import firebase from '@react-native-firebase/app';
import analytics from '@react-native-firebase/analytics';
import '@react-native-firebase/auth';
import '@react-native-firebase/database';
import '@react-native-firebase/crashlytics';
import '@react-native-firebase/functions';
import '@react-native-firebase/storage';

import { Provider } from 'react-redux';
import store from './app/store';
import Navigator from './app/routes';
import { loginUser } from './app/domain/Common/auth/actions';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
  }

  // gets the current screen from navigation state
  getActiveRouteName = (navigationState) => {
    let routeName = null;

    if (!navigationState) {
      return null;
    }
    const route = navigationState.routes[navigationState.index];
    // dive into nested navigators
    if (route.routes) {
      return getActiveRouteName(route);
    }

    routeName = route.routeName;

    // for venues, append specific venue name
    if (route.params && route.params.venueName) {
      routeName += ` - ${route.params.venueName}`;
    }

    return routeName;
  }

  render() {
    return (
      <Provider store={store}>
        <Navigator
          onNavigationStateChange={(prevState, currentState) => {
            // track user screen changes in  Analytics
            const currentScreen = this.getActiveRouteName(currentState);
            const prevScreen = this.getActiveRouteName(prevState);

            if (prevScreen !== currentScreen) {
              analytics().setCurrentScreen(currentScreen);
            }
          }} />
      </Provider>
    );
  }
}

在研究了这个问题之后，最有希望解决这个问题的方法似乎是https://github.com/invertase/react-native-firebase/issues/3035。

但我现在遇到了一个新错误：

 FAIL  __tests__/App-test.js
  ? Test suite failed to run

    /Users/kyjelly/micturnTwo/node_modules/react-native/Libraries/Utilities/warnOnce.js:15
    const warnedKeys: {[string]: boolean} = {};
          ^^^^^^^^^^

    SyntaxError: Missing initializer in const declaration

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (node_modules/react-native/Libraries/react-native/react-native-implementation.js:14:18)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        3.101s

这是我的 pacakge.json 的笑话部分

 "jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@react-native-firebase/app)"
    ]
  }

这是我的 jest.config.js

module.exports = {
  verbose: true,
  moduleNameMapper: {
    '@react-native-firebase/crashlytics': '<rootDir>/__tests__/__mocks__/firebase/crashlytics.js',
  }
};

任何人都可以指出我的正确方向吗？据我了解，Jest 在编译某些非原生 Javascript 文件时遇到问题。但是我尝试的每个解决方案都会导致另一个配置尝试的兔子洞。

Answer 1

我有一个对我有用的修复程序，它与忽略库无关，而是配置 Jest 来模拟我将要使用的函数。我已关注您粘贴的链接上的此评论。

最后我的代码如下所示：

export const setupModulesMock = (() => {
    jest.mock('@react-native-firebase/crashlytics', () => {
        return () => ({
            log: jest.fn(),
            recordError: jest.fn(),
            // Any function you want to use or mock
        });
    });
})();