Bug running Jest with ScrollView dependant components

Description

When running npm run test, the default tests index.ios.js and index.android.js fail due to the following error:

    TypeError: _this._scrollView.scrollTo is not a function

      at TabViewPagerScroll._this._scrollTo (node_modules/react-native-tab-view/src/TabViewPagerScroll.js:68:19)
      at TabViewPagerScroll.componentDidMount (node_modules/react-native-tab-view/src/TabViewPagerScroll.js:123:197)
      at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:265:25
      at measureLifeCyclePerf (node_modules/react-test-renderer/lib/ReactCompositeComponent.js:75:12)
      at node_modules/react-test-renderer/lib/ReactCompositeComponent.js:264:11
      at CallbackQueue.notifyAll (node_modules/react-test-renderer/lib/CallbackQueue.js:76:22)
      at ReactTestReconcileTransaction.close (node_modules/react-test-renderer/lib/ReactTestReconcileTransaction.js:36:26)
      at ReactTestReconcileTransaction.closeAll (node_modules/react-test-renderer/lib/Transaction.js:206:25)
      at ReactTestReconcileTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:153:16)
      at batchedMountComponentIntoNode (node_modules/react-test-renderer/lib/ReactTestMount.js:69:27)

Reproduction

$ react-native init Test
$ cd Test/
$ yarn add react-navigation
$ npm run test

Solution

I’m open to send a PR with a fix if somebody can guide me through this. Could be here https://github.com/facebook/react-native/blob/dbe555ba78d7b0f79e482c62787db2fc3d897848/Libraries/Components/ScrollView/__mocks__/ScrollViewMock.js?

Additional Information

• React Native version: 0.42.0
• Platform: both
• Operating System: macOS Sierra
• Dev tools: iOS 10.2

[jurassix]

I ran into this issue and was able to mock this simply:

jest.mock('ScrollView', () => jest.genMockFromModule('ScrollView'));

Also, I’m mocking the Linking module as well from here that @alvaromb provided:

jest.mock('Linking', () => ({
  addEventListener: jest.fn(),
  removeEventListener: jest.fn(),
  openURL: jest.genMockFn().mockReturnValue(Promise.resolve()),
  canOpenURL: jest.genMockFn().mockReturnValue(Promise.resolve()),
  getInitialURL: jest.genMockFn().mockReturnValue(Promise.resolve()),
}))

Note, I’ve configured this to be run as part of Jests setupFiles configuration.

[sam-vdp]

@minhhai2209 Great solution! One small improvement, your code broke all my existing snapshot tests, because the ScrollView mock shipped with react-native renders slightly differently. This worked for me:

jest.mock('ScrollView', () => {
  const MockScrollView = require.requireMock('ScrollViewMock');
  const React = require('React');  
  const RealScrollView = require.requireActual('ScrollView');
  class ScrollView extends React.Component {
    scrollTo() {
    }

    render() {
      return (
        <MockScrollView {...this.props} />
      );
    }
  }
  ScrollView.propTypes = RealScrollView.propTypes;
  return ScrollView;
});