it-swarm.com.de

Wie teste ich eine React Native-Komponente, die ein benutzerdefiniertes natives Modul mit Jest importiert?

Hier ist eine einfache Komponente, die ich mit React Native 0.39 und Jest 18 testen möchte:

// index.ios.js

import React, { Component } from 'react';
import { AppRegistry, NativeModules, View } from 'react-native';

export default class TestProject extends Component {
  componentDidMount() {
    NativeModules.TestModule.test();
  }

  render() {
    return <View style={{ flex: 1 }} />;
  }
}

AppRegistry.registerComponent('TestProject', () => TestProject);

Hier ist TestModule und seine test Methode:

// ios/TestProject/TestModule.m

#import "TestModule.h"

@implementation TestModule

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(test){
  NSLog(@"This is a test");
}

@end

Der folgende Test schlägt mit dem Fehler TypeError: Cannot read property 'test' of undefined fehl:

// __tests__/index.ios.js

import 'react-native';
import renderer from 'react-test-renderer';
import React from 'react';
import Index from '../index.ios.js';

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

Ich habe die Jest-Dokumentation zum Verspotten von nativen Modulen mithilfe von jest.mock gelesen, bin aber immer noch unklar, wie Jests Verspottung von NativeModules um meine TestModule-Klasse erweitert werden kann.

10
andybangs

Sie können einfach ein Mock hinzufügen, in dem sich Ihr natives Modul befinden sollte:

import {
  NativeModules,
} from 'react-native';
import React from 'react';
import renderer from 'react-test-renderer';

describe('TestProject', () => {
  beforeEach(() => {
    NativeModules.TestModule = { test: jest.fn() } 
  });
  ...
});
12
rgoldfinger

Jest ist ein JavaScript-Testtool. Es führt keinen Code aus, den Sie in Objective C/Swift/Java in einem nativen Modul geschrieben haben. Sie können die Funktionalität eines nativen Moduls nachahmen, sodass Sie es mit der von Ihnen verknüpften Methode aus JavaScript aufrufen können. z.B.

jest.mock('NetInfo', () => {
  return {
    isConnected: {
      fetch: () => {
        return new Promise((accept, resolve) => {
          accept(true);
        })
      }
    }
  }
});
2
vonovak

Auch das ist mir nicht gelungen (React-Native 0.57.5, Jest 23.6.0). Ich konnte eine Lösung finden, aber sie war völlig anders (und in meinem Fall eleganter) als hier.

Check out das Ticket, das ich eingereicht habe für weitere Details.

Im Wesentlichen musste ich NativeModules von einer Funktion ausarbeiten lassen, die als zweiter Parameter an jest.mock () übergeben wurde, und dies in ein Skript einfügen, das zu Beginn jedes Tests mit der Option setupFiles config von Jest ausgeführt wurde .

0
jebrii

Auf diese Weise werden Sie es einmal verspotten (bevor der Scherz beginnt)

jest.config.js

module.exports = {
  preset: 'react-native',
  setupFiles: ['./__mocks__/your-native-bridge.js']
};

__mocks__/your-native-bridge.js

import {NativeModules} from 'react-native';

NativeModules.YourNativeBridge = {
  property: jest.fn()
};

Vergiss nicht, alle möglichen Funktionen und Eigenschaften in YourNativeBridge zu verspotten.

0
gr3g
#__mocks__/react-native-modules

const ReactNative = require('react-native')

ReactNative.NativeModules = {
  Defaults: {
    RU: {
      publicKey: '',
      privateKey: '',
    },
  },
}

module.exports = ReactNative

und dann

# in test file
jest.mock('react-native-modules')
import 'react-native-modules'
0
stereodenis