Add example test to readme

Summary

Testing screens with ViewPager that uses setPage function fails with the following error:

TypeError: Cannot read property ‘Commands’ of undefined

Tests like below will fail:

import React from 'react';
import {render, act} from '@testing-library/react-native';
import ViewPager from '@react-native-community/viewpager';
import {View} from 'react-native';

describe('ViewPager', () => {
  test('view pager should move to next view', () => {
    const viewPagerRef = React.createRef();

    const {UNSAFE_getByType} = render(
      <ViewPager ref={viewPagerRef}>
        <View testID="page1" />
        <View testID="page2" />
      </ViewPager>,
    );

    expect(UNSAFE_getByType(ViewPager)._fiber.index).toBe(0);

    act(() => {
      viewPagerRef.current.setPage && viewPagerRef.current.setPage(1);
    });

    expect(UNSAFE_getByType(ViewPager)._fiber.index).toBe(1);
  });
});

Environment info

react-native info output:

 System:
    OS: macOS 10.15.6
    CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Memory: 21.24 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.18.3 - /var/folders/vl/7sf6krl17mz491vg6rqrlkr00000gn/T/yarn--1598293332713-0.5982209185240344/node
    Yarn: 1.22.4 - /var/folders/vl/7sf6krl17mz491vg6rqrlkr00000gn/T/yarn--1598293332713-0.5982209185240344/yarn
    npm: 6.14.6 - ~/.asdf/installs/nodejs/12.18.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 28
      Build Tools: 28.0.3, 30.0.1
      System Images: android-28 | Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6626763
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_261 - /usr/bin/javac
    Python: 2.7.16 - /Users/brunocrpontes/.asdf/shims/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.2 => 0.62.2 
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 4.1.6

Steps to reproduce

1. Create a test with <ViewPager />
2. Take its ref like <ViewPager ref={ref => viewPager = ref}
3. Call viewPager.setPage(/* page value */)

Describe what you expected to happen:

1. Call setPage doesn’t throw any errors.
2. Update value of index in component reference.

[EduVencovsky]

Any updates on this? Still not sure how to test it

[nujhong]

Took me so long to get to the bottom of this - if anyone needs to test the tab change event and the onIndexChange function, you can add this mock file or use jest.mock as others have suggested:

// __mocks__/react-native-pager-view.js

import React from 'react';
import { View } from 'react-native';

/**
 * This mock exists because there's no official jest setup for this library yet.
 *
 * @see {@link https://github.com/callstack/react-native-pager-view/issues/220}
 * @see {@link https://github.com/callstack/react-native-pager-view/issues/481}
 */
class PagerView extends React.Component {
  setPage(selectedPage: number) {
    this.props.onPageSelected?.({ nativeEvent: { position: selectedPage } });
  }

  render() {
    const { children, style, scrollEnabled, accessibilityLabel } = this.props;

    return (
      <View testID={this.props.testID} style={style} scrollEnabled={scrollEnabled} accessibilityLabel={accessibilityLabel}>
        {children}
      </View>
    );
  }
}

export { PagerView };

export default PagerView;