Question

我已经开始在我的反应原生项目中使用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...
});

我已经看过一些使用mockery的registerMock的例子，但说实话我不确定我是否全都搞砸了。在我看来，我应该使用类似我上面使用的东西：

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

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

_reactNativeExtendedStylesheet2.default.create(_extends({},
                                        ^

TypeError: _reactNativeExtendedStylesheet2.default.create is not a function

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

我应该如何在Mockery.js中模拟react-native-extended-stylesheet？

0 个答案: