web-dev-qa-db-ja.com

JestでカスタムネイティブモジュールをインポートするReactネイティブコンポーネントをテストする方法は？

React Native 0.39 and Jest 18を使用してテストしようとしている単純なコンポーネントは次のとおりです。

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

以下はTestModuleとそのtestメソッドです。

// ios/TestProject/TestModule.m

#import "TestModule.h"

@implementation TestModule

RCT_EXPORT_MODULE();

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

@end

次のテストは、エラーTypeError: Cannot read property 'test' of undefinedで失敗します。

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

jest.mock を使用してネイティブモジュールをモックする方法に関するJestのドキュメントを読みましたが、JestのNativeModulesのモックを拡張して上記のTestModuleクラスを含める方法はまだ不明です。

iosfacebookunit-testingreact-nativejestjs
18
andybangs

ネイティブモジュールを配置する場所にモックを追加するだけです。

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

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

このようにして、（冗談が始まる前に）1回モックします。

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

YourNativeBridgeのすべての可能な関数、プロパティをモックすることを忘れないでください

4
gr3g

JestはJavaScriptテストツールであり、ネイティブモジュールのObjective C/Swift/Javaで記述したコードを実行しません。ネイティブモジュールの機能をモックして、リンク先の方法でJavaScriptから呼び出すことができます。例えば。

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

これも私には失敗しました（react-native 0.57.5、jest 23.6.0）。私は解決策を見つけることができましたが、それはこことは完全に異なっていました（私の場合、よりエレガントな修正）。

詳細は 私が提出したチケット をチェックしてください。

基本的に、2番目のパラメーターとして渡される関数によってNativeModuleを具体化して jest.mock（） とし、これをJestの setupFiles 設定オプション。

0
jebrii
#__mocks__/react-native-modules

const ReactNative = require('react-native')

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

module.exports = ReactNative

その後

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