在React Native中测试本机事件发射器和本机模块

问题描述

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

I have a React Native component which communicates with a custom iOS class, so I make use of NativeModules en NativeEventEmitter to send commands to and receive commands from the native code.

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事件，然后断言已调用侦听器.

This code works just fine, but now I wanted to write some tests with Jest and this is where I am stuck. How would I go ahead to write a test for the event listener? I want to simulate a DeviceDiscovered event in a Jest test, and then assert that the listener is called.

推荐答案

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

To solve my problem I have mocked RCTDeviceEventEmitter by using an everyday JS EventEmitter:

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来说，我导入了该模拟来替换react-native实现.

Than in my setupFile for jest I imported the mock to replace the react-native implementation.

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');

最后我的实际测试代码是

And than finally my actual test code:

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);    
  });
});

这篇关于在React Native中测试本机事件发射器和本机模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！