How should I mock out react-native-extended-stylesheet in Mockery.js? - node.js

Question

I have started using ava.js in my react native project. I have an AVA setup file that looks like this (from the Ignite starter project):
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);
};
I have created a test on a simple component I am using. However, in our app, we started using react-native-extended-stylesheet. This means we need to mock that module to get our tests to run and it is exactly this that I am having trouble with.
I have a test that looks something like this:
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 imports the following style code:
// #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...
});
I have seen a few examples of using mockery's registerMock but to be honest I'm not sure I grok them all. It seems to me that I should be using something like what I used above:
mockery.registerMock('react-native-extended-stylesheet', {
EStyleSheet: {
create: {}
}
});
But running that gives me the following error:
_reactNativeExtendedStylesheet2.default.create(_extends({},
^
TypeError: _reactNativeExtendedStylesheet2.default.create is not a function
So what is the correct syntax in registerMock to get this to run? (I welcome other answers too if they address the underlying issue - how can I get on and test my component?)