如何测试使用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组件？

回答

相关问题