如何測試使用Jest導入自定義本地模塊的React Native組件？

這裏是我試圖用反應測試一個簡單的組件原生0.39和玩笑18：如何測試使用Jest導入自定義本地模塊的React Native組件？

// 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的NativeModules模擬以包含上面的TestModule類。

來源

2016-12-27 andybangs

您可以簡單地添加一個模擬在您的本機模塊應該是：

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

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

來源

2016-12-28 18:41:48 rgoldfinger

謝謝！傳遞給'beforeEach'的函數缺少一個閉合大括號，但除此之外就像一個魅力。我也選擇使用'beforeAll'，因爲這個設置只需要運行一次，而不是在每個規範之前運行。 – andybangs

太棒了，我添加了缺少的大括號。 – rgoldfinger

Jest是一個JavaScript測試工具，它不會運行您在Objective C/Swift/Java中編寫的本地模塊中的代碼。您可以模擬本地模塊的功能，以便您可以通過鏈接的方法從JavaScript調用它。例如。

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

來源

2016-12-28 14:36:46 vonovak

我認爲這個誤解了問題，我也有。 OP詢問你如何模擬從'react-native'導入的'NativeModules.TestModule'。由於'react-native'需要被導入，而不是被嘲弄，因此'react-test-renderer'覆蓋工作。 – rgoldfinger

@rgoldfinger是正確的。我不是試圖測試本地模塊本身，而是試圖模擬'NativeModules.TestModule'來測試'index.ios.js'。 – andybangs

有沒有辦法測試本地模塊？ – Dor

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

來源

2017-03-07 16:37:51 stereodenis

這樣一來，你會再嘲笑它（開玩笑前開始）

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

來源

2017-12-04 17:32:40 gr3g

如何測試使用Jest導入自定義本地模塊的React Native組件？

回答

相關問題