How should I mock out react-native-extended-stylesheet in Mockery.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?)

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

0 Answers0