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

Question

ここ

は私が反応使ってテストしようとしています単純なコンポーネントであるネイティブ0.39と冗談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 /> 
); 
}); 

私はどのようにMock native modules using jest.mockが、午前ST上の冗談のドキュメントを読んでいますJestのNativeModuleのモックを上記のTestModuleクラスを含むように拡張する方法については不明です。

Answer 1

：

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

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

Answer 2

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

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

Answer 3

#__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' 

Answer 4

この道を、あなたは冗談前に（一度にそれを模擬します開始）

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