如何测试用开玩笑导入自定义本机模块的反应本机组件

Question

这是一个简单的组件，我正在尝试使用React Native 0.39和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的NativeModules的模型以包括上面的我的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.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

Answer 3

jest是一种JavaScript测试工具，它不会运行您在本机模块中用Objective C/Swift/Java编写的代码。您可以模拟本机模块的功能，以便可以通过链接到的方法从JavaScript调用它。例如

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

Answer 4

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

这对我也失败了（反应本地0.57.5，jest 23.6.0）。我能够找到一个解决方案，但这完全不同（在我的情况下，修复程序更优雅）。

查看我提交的票证以获取更多详细信息。

本质上，我必须将通过函数作为第二个参数传递给jest..mock（）的函数充实的nativemodules，然后使用jest的setupfiles config option。