add: working jest configuration

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+};

package.json

@@ -38,18 +38,25 @@
     "trailingComma": "es5"
   },
   "devDependencies": {
+    "@testing-library/jest-native": "^3.0.2",
+    "@testing-library/react-native": "^4.1.0",
     "@types/jest": "^24.0.18",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@types/react-native": "^0.60.11",
+    "babel-plugin-module-resolver": "^3.2.0",
     "husky": "^3.0.5",
+    "metro-react-native-babel-preset": "^0.56.3",
     "prettier": "^1.18.2",
+    "pretty-format": "^24.9.0",
     "pretty-quick": "^1.11.1",
-    "react": "^16.9.0",
+    "react": "^16.11.0",
     "react-dom": "^16.9.0",
     "react-native": "^0.60.5",
     "react-native-gesture-handler": "^1.4.1",
     "react-native-reanimated": "^1.3.0",
+    "react-test-renderer": "^16.11.0",
+    "ts-jest": "^24.1.0",
     "tsdx": "^0.9.1",
     "tslib": "^1.10.0",
     "typescript": "^3.6.2"
@@ -71,5 +78,21 @@
     "tabs",
     "react-native-tabs",
     "react-tabs"
-  ]
+  ],
+  "jest": {
+    "preset": "@testing-library/react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example"
+    ],
+    "transformIgnorePatterns": [
+      "node_modules/(?!(react-native|react-native-screens|react-native-reanimated|react-native-gesture-handler)/)"
+    ],
+    "setupFilesAfterEnv": [
+      "./test/setup.ts",
+      "@testing-library/react-native/cleanup-after-each"
+    ],
+    "transform": {
+      "^.+\\.(t)sx?$": "ts-jest"
+    }
+  }
 }

src/pager.tsx

@@ -6,7 +6,12 @@ import React, {
   useEffect,
   memo,
 } from 'react';
-import { StyleSheet, LayoutChangeEvent, ViewStyle } from 'react-native';
+import {
+  StyleSheet,
+  LayoutChangeEvent,
+  ViewStyle,
+  AccessibilityStates,
+} from 'react-native';
 import Animated from 'react-native-reanimated';
 import {
   PanGestureHandler,
@@ -213,8 +218,22 @@ function Pager({
     )
   );
 
-  const [width, setWidth] = useState(UNSET);
-  const [height, setHeight] = useState(UNSET);
+  let initialWidth = UNSET;
+  if (style && style.width) {
+    if (typeof style.width === 'number') {
+      initialWidth = style.width;
+    }
+  }
+
+  let initialHeight = UNSET;
+  if (style && style.height) {
+    if (typeof style.height === 'number') {
+      initialHeight = style.height;
+    }
+  }
+
+  const [width, setWidth] = useState(initialWidth);
+  const [height, setHeight] = useState(initialHeight);
 
   // assign references based on vertical / horizontal configurations
   const dimension = memoize(new Value(0));
@@ -401,6 +420,7 @@ function Pager({
                   [targetDimension]: totalDimension,
                   transform: [{ [targetTransform]: containerTranslation }],
                 }}
+                accessibilityRole="tablist"
               >
                 {width === UNSET
                   ? null
@@ -436,7 +456,8 @@ function Pager({
                           </FocusProvider>
                         </IndexProvider>
                       );
-                    })}
+                    })}{' '}
+                }
               </Animated.View>
             </Animated.View>
           </Animated.View>
@@ -446,6 +467,18 @@ function Pager({
   );
 }
 
+interface iPage {
+  children: React.ReactNode;
+  index: number;
+  minimum: Animated.Node<number>;
+  maximum: Animated.Node<number>;
+  dimension: Animated.Node<number>;
+  targetTransform: 'translateX' | 'translateY';
+  targetDimension: 'width' | 'height';
+  pageInterpolation: iPageInterpolation | undefined;
+  animatedIndex: Animated.Value<number>;
+}
+
 function _Page({
   children,
   index,
@@ -456,7 +489,7 @@ function _Page({
   targetDimension,
   pageInterpolation,
   animatedIndex,
-}: any) {
+}: iPage) {
   // compute the absolute position of the page based on index and dimension
   // this means that it's not relative to any other child, which is good because
   // it doesn't rely on a mechanism like flex, which requires all children to be present
@@ -515,9 +548,7 @@ function _Page({
   );
 }
 
-// the only thing that changes in <Page /> is the children, since it usually
-// gets a fresh child from a .map function
-const Page = memo(_Page, () => true);
+const Page = memo(_Page);
 
 // utility to update animated values without changing their reference
 // this is key for using memoized Animated.Values and prevents costly rerenders

test/pager.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from './test-utils';
+import { Pager } from '../src';
+import { Text } from 'react-native';
+
+test('render()', () => {
+  const { debug } = render(
+    <Pager style={{ width: 200, height: 200 }}>
+      <Text>1</Text>
+      <Text>2</Text>
+    </Pager>
+  );
+
+  debug();
+});

test/setup.ts

@@ -0,0 +1,50 @@
+jest.mock('react-native-reanimated', () => {
+  const mock = require('react-native-reanimated/mock');
+  mock.default.Value = function() {
+    return {
+      setValue: function() {},
+    };
+  };
+
+  mock.default.proc = function() {
+    return function() {};
+  };
+
+  return mock;
+});
+
+jest.mock('react-native-gesture-handler', () => {
+  const View = require('react-native/Libraries/Components/View/View');
+  return {
+    Swipeable: View,
+    DrawerLayout: View,
+    State: {},
+    ScrollView: View,
+    Slider: View,
+    Switch: View,
+    TextInput: View,
+    ToolbarAndroid: View,
+    ViewPagerAndroid: View,
+    DrawerLayoutAndroid: View,
+    WebView: View,
+    NativeViewGestureHandler: View,
+    TapGestureHandler: View,
+    FlingGestureHandler: View,
+    ForceTouchGestureHandler: View,
+    LongPressGestureHandler: View,
+    PanGestureHandler: View,
+    PinchGestureHandler: View,
+    RotationGestureHandler: View,
+    /* Buttons */
+    RawButton: View,
+    BaseButton: View,
+    RectButton: View,
+    BorderlessButton: View,
+    /* Other */
+    FlatList: View,
+    gestureHandlerRootHOC: jest.fn(),
+    Directions: {},
+  };
+});
+
+import '@testing-library/jest-native/extend-expect';

test/test-utils.ts

@@ -0,0 +1,78 @@
+import { render, prettyPrint } from '@testing-library/react-native';
+import format from 'pretty-format';
+
+const { ReactElement, ReactTestComponent } = format.plugins;
+
+function createFormatter(propsToRemove) {
+  const plugin = {
+    test(val: any) {
+      return val.props !== undefined;
+    },
+    serialize(
+      element: any,
+      config: any,
+      indentation: any,
+      depth: any,
+      refs: any,
+      printer: any
+    ) {
+      Object.keys(element.props).map(prop => {
+        if (propsToRemove.includes(prop)) {
+          delete element.props[prop];
+        }
+      });
+
+      if (ReactTestComponent.test(element)) {
+        return ReactTestComponent.serialize(
+          element,
+          config,
+          indentation,
+          depth,
+          refs,
+          printer
+        );
+      }
+
+      return ReactElement.serialize(
+        element,
+        config,
+        indentation,
+        depth,
+        refs,
+        printer
+      );
+    },
+  };
+
+  return plugin;
+}
+
+const removeStyleProp = createFormatter([
+  'style',
+  'pointerEvents',
+  'collapsable',
+]);
+
+const defaultPlugins = [removeStyleProp, ReactTestComponent, ReactElement];
+
+const customRender = (ui: any, options?: any) => {
+  const utils = render(ui, { ...options });
+
+  function removeStylesFromDebug() {
+    return console.log(
+      // @ts-ignore
+      prettyPrint(utils.baseElement, undefined, { plugins: defaultPlugins })
+    );
+  }
+
+  return {
+    ...utils,
+    debug: removeStylesFromDebug,
+  };
+};
+
+// re-export everything
+export * from '@testing-library/react-native';
+
+// override render method
+export { customRender as render };

tsconfig.json

@@ -9,14 +9,14 @@
     "sourceMap": true,
     "rootDir": "./",
     "strict": true,
-    "noImplicitAny": true,
+    "noImplicitAny": false,
     "strictNullChecks": true,
     "strictFunctionTypes": true,
     "strictPropertyInitialization": true,
     "noImplicitThis": true,
     "alwaysStrict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "moduleResolution": "node",