javascript - 在 React Native 中测试原生事件发射器和原生模块

Question

我有一个与自定义 iOS 类通信的 React Native 组件，因此我使用 NativeModules en NativeEventEmitter 向本地代码发送命令和从本地代码接收命令。

import {NativeModules, NativeEventEmitter} from 'react-native';

/* inside the constructor I do some setup: */
const { NetworkManager } = NativeModules;
const emitter = new NativeEventEmitter(NetworkManager);


/* here I subscribe to an event from the emitter */
public startDiscovery() {

  const deviceFoundSubscription = this._emitter.addListener(
    "DeviceDiscovered",
    (device) => this.deviceFound(device)
  );
  this.NetworkManager.startDiscovery();
}

这段代码工作得很好，但现在我想用 Jest 编写一些测试，这就是我被困的地方。我将如何继续为事件监听器编写测试？我想在 Jest 测试中模拟 DeviceDiscovered 事件，然后断言调用了监听器。

Answer 1

为了解决我的问题，我通过使用日常 JS EventEmitter 来模拟 RCTDeviceEventEmitter:

const EventEmitter = require('EventEmitter');
const RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');

/**
 * Mock the NativeEventEmitter as a normal JS EventEmitter.
 */
export class NativeEventEmitter extends EventEmitter {
  constructor() {
    super(RCTDeviceEventEmitter.sharedSubscriber);
  }
}

比起在我的 setupFile 中开 Jest ，我导入了模拟来替换 react-native 实现。

import NativeEventEmitter from './__mocks__/nativeEventEmitter';
import { NativeModules } from 'react-native';

// Mock for my native module where I create a spy for the methods
const mockNativeModules = {
  NetworkManager: {
    startDiscovery: jest.fn(),
    stopDiscovery: jest.fn(),
    connectToHost: jest.fn(),
    sendMessage: jest.fn()
  }
};

// Mock every native module you use
Object.keys(mockNativeModules).forEach((module => {
    jest.doMock(module, () => mockNativeModules[module], { virtual:true });
}));

jest.doMock('NativeModules', () => mockNativeModules);

jest.mock('NativeEventEmitter');

最后是我的实际测试代码:

import {
  NativeModules,
  NativeEventEmitter,
} from 'react-native';

import { DiscoveryService } from '/services/discoveryService';

import { device1, device2 } from './../fixtures/devices';

const nativeEventEmitter = new NativeEventEmitter();

describe('Discovery Service', () => {

  beforeEach(() => {
    discoveryService.deviceDiscovered = jest.fn();
    discoveryService.startDiscovery();
  });

  test('Should call startDiscovery on Native Module NetworkManager', () => {

    nativeEventEmitter.emit('DeviceDiscovered', device);

    expect(NativeModules.NetworkManager.startDiscovery).toHaveBeenCalledTimes(1);
    expect(discoveryService.serverFound).toHaveBeenCalledWith(device1);
  });

  test('Should handle multiple discoveries', () => {

    nativeEventEmitter.emit('DeviceDiscovered', device1);
    expect(discoveryService.serverFound).toHaveBeenCalledWith(device1);

    nativeEventEmitter.emit('DeviceDiscovered', device2)
    expect(discoveryService.deviceFound).toHaveBeenCalledWith(device2);    
  });
});