Làm cách nào để kiểm tra thành phần Gốc phản ứng nhập mô-đun gốc tùy chỉnh bằng Jest?

Question

Dưới đây là một thành phần đơn giản mà tôi đang cố gắng thử nghiệm sử dụng Phản ứng Native 0,39 và 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); 

Đây là TestModule và test phương pháp của nó:

// ios/TestProject/TestModule.m 

#import "TestModule.h" 

@implementation TestModule 

RCT_EXPORT_MODULE(); 

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

@end 

Các thử nghiệm sau thất bại với lỗi 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 /> 
); 
}); 

tôi đã đọc các tài liệu jest về cách Mock native modules using jest.mock, nhưng tôi st không rõ ràng về cách mở rộng mô hình NativeModules của Jest để bao gồm lớp TestModule của tôi ở trên.

Answer 1

Bạn chỉ có thể thêm một mô hình nơi mô-đun mẹ đẻ của bạn nên là:

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 là một công cụ kiểm tra JavaScript, nó sẽ không chạy mã mà bạn đã viết trong Mục tiêu C/Swift/Java trong một mô-đun gốc. Bạn có thể giả lập chức năng của một mô-đun gốc để bạn có thể gọi nó từ JavaScript bằng cách tiếp cận mà bạn đã liên kết đến. ví dụ.

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 

và sau đó

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

Answer 4

Bằng cách này, bạn sẽ thử nó một lần (trước jest bắt đầu)

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

Đừng quên để thử tất cả các chức năng có thể, tài sản trong YourNativeBridge