React-native-snap-carousel: Cannot read property 'style' of undefined

[AntoineGrandchamp]

I get this error when I run my tests with jest and it tries to import react-native-snap-carousel :
TypeError: Cannot read property 'style' of undefined at Object.<anonymous> (node_modules/react-native-snap-carousel/index.js:472:842)

[stivaugoin]

Same problem here!

[bd-arc]

@AntoineGrandchamp I am not familiar with Jest, but I can investigate in order to see what triggers this error. Can you share your test script?

[AntoineGrandchamp]

Here is my test file :

import 'react-native';

import configureStore from 'redux-mock-store';
import { Provider } from 'react-redux';
import React from 'react';
import renderer from 'react-test-renderer';
import { dictionaries } from '../../../i18n/translation';
import Guides from '../Guides';

const reducers = [];
const mockStore = configureStore(reducers);
const store = mockStore({});

const props = {
  navigation: {},
  onSetGuide: () => {},
};

it('renders correctly', () => {
  const tree = renderer.create(
    <Provider store={store}>
      <Guides 
        {...props}
      />
    </Provider>,
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

The error pops when import Carousel from 'react-native-snap-carousel'; is called in the file Guides.js.

I did some tests and it seems like ScrollView.propTypes at line 44 and 48 of your index.jsfile is undefined when the test is run.

[RCiesielczuk]

Hi @bd-arc, I've ran into the same issue as @AntoineGrandchamp. Did you manage to have a look at it?

Thanks

[thurt]

hi guys,

ran into this problem as well.

i think the problem is related to these three lines
https://github.com/archriss/react-native-snap-carousel/blob/master/index.js#L56
https://github.com/archriss/react-native-snap-carousel/blob/master/index.js#L60
https://github.com/archriss/react-native-snap-carousel/blob/master/index.js#L87

if I temporarily comment those lines out in node_modules/react-native-snap-carousel then jest test no longer gets the described error.

these three lines appear to point to this line in react-native source -> https://github.com/facebook/react-native/blob/v0.43.1/Libraries/Components/ScrollView/ScrollView.js#L297

a temporary solution is to create a mock react-native-snap-carousel.js inside a __mocks__ folder. mine just looks like:

/*
  FIXME: using an empty mock in order to bypass jest test error. see tracking issue: https://github.com/archriss/react-native-snap-carousel/issues/43
 */
module.exports = () => {};

[bd-arc]

Hi guys,

First, kudos to @thurt for your thorough investigation and your temporary solution :)

To be honest, I couldn't find time to play with Jest and try to understand the root of the issue; sorry about that. Still, I really don't get why declaring style proptypes this way would result in ScrollView being undefined...

I guess I could fall back to something along those lines: PropTypes.oneOfType([PropTypes.number, PropTypes.object]). But this is not really elegant...

This plugin uses the same syntax as ours; does it trigger the same error for you guys?

[hoangnm]

It's because React Native does mock ScrollView for you when you write unit test with Jest https://github.com/facebook/react-native/blob/master/jest/setup.js. You can use jest.unmock('ScrollView') before importing the component in test file.

[bd-arc]

Thanks @hoangnm for this very useful info! I've added it to the README ;-)