2

我已经开始在我的 react native 项目中使用ava.js。我有一个如下所示的 AVA 设置文件（来自 Ignite 入门项目）：

import mockery from 'mockery';
import m from 'module';

// inject __DEV__ as it is not available when running through the tests
global.__DEV__ = true;

// We enable mockery and leave it on.
mockery.enable();

// Silence the warnings when *real* modules load... this is a change from
// the norm.  We want to opt-in instead of opt-out because not everything
// will be mocked.
mockery.warnOnUnregistered(false);

// Mock any libs that get called in here
// I'm looking at you react-native-router-flux, reactotron etc!
mockery.registerMock('reactotron-react-native', {});
mockery.registerMock('react-native-fetch-blob', {});
mockery.registerMock('reactotron-redux', {});
mockery.registerMock('reactotron-apisauce', {});
mockery.registerMock('react-native-animatable', { View: 'Animatable.View' });
mockery.registerMock('react-native-vector-icons/Ionicons', {});
mockery.registerMock('react-native-vector-icons/FontAwesome', {});
mockery.registerMock('react-native-config', {
  CLIENT_API_USERNAME_DEV: 'username',
  CLIENT_API_PASSWORD_DEV: 'password'});
mockery.registerMock('react-native-device-info', {});
mockery.registerMock('react-native-uuid-generator', {});
mockery.registerMock('react-native-cached-image', {});
mockery.registerMock('react-native-extended-stylesheet', {
  EStyleSheet: {
    create: {}
  }
});




// mock i18n as it uses react native stufff
mockery.registerMock('react-native-i18n', {
  t: key => key,
});

// Mock all images for React Native
const originalLoader = m._load;
m._load = (request, parent, isMain) => {
  if (request.match(/.jpeg|.jpg|.png|.gif$/)) {
    return { uri: request };
  }

  return originalLoader(request, parent, isMain);
};

我在我正在使用的一个简单组件上创建了一个测试。但是，在我们的应用程序中，我们开始使用react-native-extended-stylesheet。这意味着我们需要模拟该模块以运行我们的测试，而这正是我遇到的麻烦。

我有一个看起来像这样的测试：

import { test } from 'ava';
import React from 'react';
import TheComponent from '../../App/Components/TheComponent';
import { render } from 'enzyme';

const wrapper = render(<TheComponent/>);

test('component exists', (t) => {
  t.is(wrapper.length, 1);
});

TheComponent 导入以下样式代码：

// @flow

import { Platform } from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';
import { ApplicationStyles, Metrics, Colors, Fonts } from '../../Themes/';

const height = Math.floor((Metrics.screenWidth / 2) * Metrics.defaultImageRatio);
const width = Metrics.screenWidth / 2;

export default EStyleSheet.create({
  ...ApplicationStyles.screen,
  item: {
    width,
    height,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 0,
    backgroundColor: 'transparent',
  }, // more styles here...
});

我已经看到了一些使用嘲弄的 registerMock 的例子，但老实说，我不确定我是否完全理解了它们。在我看来，我应该使用类似于上面使用的东西： 

    mockery.registerMock('react-native-extended-stylesheet', {
      EStyleSheet: {
        create: {}
      }
    });

但是运行它会给我以下错误：

_reactNativeExtendedStylesheet2.default.create(_extends({},
                                        ^

TypeError: _reactNativeExtendedStylesheet2.default.create is not a function

那么 registerMock 中运行它的正确语法是什么？（如果他们解决了根本问题，我也欢迎其他答案 - 我怎样才能开始并测试我的组件？）

4

0 回答 0