我已经开始在我的反应原生项目中使用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中的正确语法是什么来运行它? (如果他们解决了潜在的问题,我也欢迎其他答案 - 我怎样才能开始测试我的组件?)