React Native 笑话测试：TypeError：无法读取未定义的属性“unsubscribeFromTopic”答案

【问题标题】：React Native jest test: TypeError: Cannot read property 'unsubscribeFromTopic' of undefinedReact Native 笑话测试：TypeError：无法读取未定义的属性“unsubscribeFromTopic”
【发布时间】：2017-06-27 18:18:21
【问题描述】：

我正在使用 react-native-fcm 和 jest 来测试我的 React Native 应用程序。我有一个非常基本的测试，它看起来像这样：

import 'react-native';
import React from 'react';
import PushController from '../app/PushController';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

it('works correctly', () => {
  const tree = renderer.create(
    <PushController />
  );
});

而且PushController 有点大，所以这里是有趣的部分

import React, { Component } from 'react';
import { AsyncStorage } from 'react-native';
import FCM from 'react-native-fcm';

export default class PushController extends Component {
(...)

  componentDidMount() {
    if (this.notificationListener) this.notificationListener.remove();

    this.notificationListener = FCM.on('notification', (notif) => {

        if (!notif.local_notification) {
          this.notifyUser(notif.coffee);
        }

    });
    FCM.unsubscribeFromTopic('/topics/coffee');
    FCM.subscribeToTopic('/topics/coffee');
  }
(...)

但是，在运行测试时，我得到了

__tests__/PushControllerTest.js
  ● works correctly

    TypeError: Cannot read property 'unsubscribeFromTopic' of undefined

      at Object.FCM.unsubscribeFromTopic (node_modules/react-native-fcm/index.js:86:15)
      at PushController.componentDidMount (app/PushController.js:44:26)
      at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:265:25
      at measureLifeCyclePerf (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:75:12)
      at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:264:11
      at CallbackQueue.notifyAll (node_modules/react-test-renderer/lib/CallbackQueue.js:76:22)
      at ReactTestReconcileTransaction.ON_DOM_READY_QUEUEING.close (node_modules/react-test-renderer/lib/ReactTestReconcileTransaction.js:36:26)
      at ReactTestReconcileTransaction.TransactionImpl.closeAll (node_modules/react-test-renderer/lib/Transaction.js:206:25)
      at ReactTestReconcileTransaction.TransactionImpl.perform (node_modules/react-test-renderer/lib/Transaction.js:153:16)
      at batchedMountComponentIntoNode (node_modules/react-test-renderer/lib/ReactTestMount.js:69:27)

我尝试在测试中包含很多东西，比如jest.mock('react-native-fcm') 和其他东西，但我根本无法让它工作。我知道jest 会自动模拟库，但我不明白为什么FCM 未定义。有什么想法吗？

【问题讨论】：

标签： javascript android react-native firebase-cloud-messaging jestjs

【解决方案1】：

我终于解决了！只需将我的测试更改为

import 'react-native';
import React from 'react';
import PushController from '../app/PushController';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
import FCM from 'react-native-fcm'; // <-- This

it('works correctly', () => {
  FCM.unsubscribeFromTopic = jest.fn(); // <-- These two 
  FCM.subscribeToTopic = jest.fn();
  const tree = renderer.create(
    <PushController />
  );
});

确保实际调用被模拟。在此之前我做了很多谷歌搜索，所以我相信这对某人有用。

【讨论】：