test: add basic unit tests for all navigators

.eslintrc.json

@@ -1,7 +1,9 @@
 {
   "extends": "satya164",
   "settings": {
-    "react": { "version": "16" },
+    "react": {
+      "version": "16"
+    },
     "import/core-modules": [
       "@react-navigation/core",
       "@react-navigation/native",
@@ -15,5 +17,11 @@
       "@react-navigation/devtools"
     ]
   },
-  "env": { "browser": true, "node": true }
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "rules": {
+    "react/no-unused-prop-types": "off"
+  }
 }

babel.config.js

@@ -1,22 +1,3 @@
 module.exports = {
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        useBuiltIns: 'usage',
-        corejs: 3,
-        targets: {
-          node: 'current',
-        },
-      },
-    ],
-    '@babel/preset-react',
-    '@babel/preset-typescript',
-  ],
-  plugins: [
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-proposal-optional-chaining',
-    '@babel/transform-flow-strip-types',
-    '@babel/plugin-proposal-nullish-coalescing-operator',
-  ],
+  presets: ['module:metro-react-native-babel-preset'],
 };

jest/setup.js

@@ -1,3 +1,21 @@
+/* eslint-env jest */
+/* eslint-disable import/no-extraneous-dependencies */
+
+import 'react-native-gesture-handler/jestSetup';
+
+jest.mock('react-native-reanimated', () => {
+  const Reanimated = require('react-native-reanimated/mock');
+
+  // The mock for `call` immediately calls the callback which is incorrect
+  // So we override it with a no-op
+  Reanimated.default.call = () => {};
+
+  return Reanimated;
+});
+
+// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
+jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
+
 const error = console.error;
 
 console.error = (...args) =>

package.json

@@ -25,24 +25,17 @@
     "example": "yarn --cwd example"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.10.1",
-    "@babel/plugin-proposal-optional-chaining": "^7.10.1",
-    "@babel/preset-env": "^7.10.2",
-    "@babel/preset-flow": "^7.10.1",
-    "@babel/preset-react": "^7.10.1",
-    "@babel/preset-typescript": "^7.10.1",
-    "@babel/runtime": "^7.10.2",
     "@commitlint/config-conventional": "^8.3.4",
     "@types/jest": "^26.0.0",
     "babel-jest": "^26.0.1",
     "codecov": "^3.7.0",
     "commitlint": "^8.3.5",
-    "core-js": "^3.6.5",
     "eslint": "^7.2.0",
     "eslint-config-satya164": "^3.1.7",
     "husky": "^4.2.5",
     "jest": "^26.0.1",
     "lerna": "^3.22.1",
+    "metro-react-native-babel-preset": "^0.59.0",
     "prettier": "^2.0.5",
     "typescript": "^3.9.5"
   },
@@ -59,9 +52,6 @@
   "jest": {
     "testEnvironment": "node",
     "testRegex": "/__tests__/.*\\.(test|spec)\\.(js|tsx?)$",
-    "transform": {
-      "^.+\\.(js|ts|tsx)$": "babel-jest"
-    },
     "setupFiles": [
       "<rootDir>/jest/setup.js"
     ],

packages/bottom-tabs/package.json

@@ -50,6 +50,7 @@
     "react-native": "~0.61.5",
     "react-native-safe-area-context": "^1.0.0",
     "react-native-screens": "^2.7.0",
+    "react-native-testing-library": "^2.1.0",
     "typescript": "^3.9.5"
   },
   "peerDependencies": {

packages/bottom-tabs/src/__tests__/index.test.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { View, Text, Button } from 'react-native';
+import { render, fireEvent } from 'react-native-testing-library';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import { createBottomTabNavigator, BottomTabScreenProps } from '../index';
+
+it('renders a bottom tab navigator with screens', async () => {
+  const Test = ({ route, navigation }: BottomTabScreenProps<ParamListBase>) => (
+    <View>
+      <Text>Screen {route.name}</Text>
+      <Button onPress={() => navigation.navigate('A')} title="Go to A" />
+      <Button onPress={() => navigation.navigate('B')} title="Go to B" />
+    </View>
+  );
+
+  const Tab = createBottomTabNavigator();
+
+  const { findByText, queryByText } = render(
+    <NavigationContainer>
+      <Tab.Navigator>
+        <Tab.Screen name="A" component={Test} />
+        <Tab.Screen name="B" component={Test} />
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
+
+  expect(queryByText('Screen A')).not.toBeNull();
+  expect(queryByText('Screen B')).toBeNull();
+
+  fireEvent.press(await findByText('Go to B'));
+
+  expect(queryByText('Screen B')).not.toBeNull();
+});

packages/drawer/package.json

@@ -56,6 +56,7 @@
     "react-native-reanimated": "^1.8.0",
     "react-native-safe-area-context": "^1.0.0",
     "react-native-screens": "^2.7.0",
+    "react-native-testing-library": "^2.1.0",
     "typescript": "^3.9.5"
   },
   "peerDependencies": {

packages/drawer/src/__tests__/index.test.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { View, Text, Button } from 'react-native';
+import { render, fireEvent } from 'react-native-testing-library';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import { createDrawerNavigator, DrawerScreenProps } from '../index';
+
+it('renders a drawer navigator with screens', async () => {
+  const Test = ({ route, navigation }: DrawerScreenProps<ParamListBase>) => (
+    <View>
+      <Text>Screen {route.name}</Text>
+      <Button onPress={() => navigation.navigate('A')} title="Go to A" />
+      <Button onPress={() => navigation.navigate('B')} title="Go to B" />
+    </View>
+  );
+
+  const Drawer = createDrawerNavigator();
+
+  const { findByText, queryByText } = render(
+    <NavigationContainer>
+      <Drawer.Navigator>
+        <Drawer.Screen name="A" component={Test} />
+        <Drawer.Screen name="B" component={Test} />
+      </Drawer.Navigator>
+    </NavigationContainer>
+  );
+
+  expect(queryByText('Screen A')).not.toBeNull();
+  expect(queryByText('Screen B')).toBeNull();
+
+  fireEvent(await findByText('Go to B'), 'press');
+
+  expect(queryByText('Screen B')).not.toBeNull();
+});

packages/material-bottom-tabs/package.json

@@ -50,6 +50,7 @@
     "react": "~16.9.0",
     "react-native": "~0.61.5",
     "react-native-paper": "^3.10.1",
+    "react-native-testing-library": "^2.1.0",
     "react-native-vector-icons": "^6.6.0",
     "typescript": "^3.9.5"
   },

packages/material-bottom-tabs/src/__tests__/index.test.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { View, Text, Button } from 'react-native';
+import { render, fireEvent } from 'react-native-testing-library';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createMaterialBottomTabNavigator,
+  MaterialBottomTabScreenProps,
+} from '../index';
+
+it('renders a material bottom tab navigator with screens', async () => {
+  const Test = ({
+    route,
+    navigation,
+  }: MaterialBottomTabScreenProps<ParamListBase>) => (
+    <View>
+      <Text>Screen {route.name}</Text>
+      <Button onPress={() => navigation.navigate('A')} title="Go to A" />
+      <Button onPress={() => navigation.navigate('B')} title="Go to B" />
+    </View>
+  );
+
+  const Tab = createMaterialBottomTabNavigator();
+
+  const { findByText, queryByText } = render(
+    <NavigationContainer>
+      <Tab.Navigator>
+        <Tab.Screen name="A" component={Test} />
+        <Tab.Screen name="B" component={Test} />
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
+
+  expect(queryByText('Screen A')).not.toBeNull();
+  expect(queryByText('Screen B')).toBeNull();
+
+  fireEvent(await findByText('Go to B'), 'press');
+
+  expect(queryByText('Screen B')).not.toBeNull();
+});

packages/material-top-tabs/package.json

@@ -54,6 +54,7 @@
     "react-native-gesture-handler": "^1.6.0",
     "react-native-reanimated": "^1.8.0",
     "react-native-tab-view": "^2.14.4",
+    "react-native-testing-library": "^2.1.0",
     "typescript": "^3.9.5"
   },
   "peerDependencies": {

packages/material-top-tabs/src/__tests__/index.test.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { View, Text, Button } from 'react-native';
+import { render, fireEvent } from 'react-native-testing-library';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createMaterialTopTabNavigator,
+  MaterialTopTabScreenProps,
+} from '../index';
+
+it('renders a material bottom tab navigator with screens', async () => {
+  const Test = ({
+    route,
+    navigation,
+  }: MaterialTopTabScreenProps<ParamListBase>) => (
+    <View>
+      <Text>Screen {route.name}</Text>
+      <Button onPress={() => navigation.navigate('A')} title="Go to A" />
+      <Button onPress={() => navigation.navigate('B')} title="Go to B" />
+    </View>
+  );
+
+  const Tab = createMaterialTopTabNavigator();
+
+  const { findByText, queryByText } = render(
+    <NavigationContainer>
+      <Tab.Navigator>
+        <Tab.Screen name="A" component={Test} />
+        <Tab.Screen name="B" component={Test} />
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
+
+  expect(queryByText('Screen A')).not.toBeNull();
+  expect(queryByText('Screen B')).toBeNull();
+
+  fireEvent(await findByText('Go to B'), 'press');
+
+  expect(queryByText('Screen B')).not.toBeNull();
+});

packages/stack/package.json

@@ -56,6 +56,7 @@
     "react-native-gesture-handler": "^1.6.0",
     "react-native-safe-area-context": "^1.0.0",
     "react-native-screens": "^2.7.0",
+    "react-native-testing-library": "^2.1.0",
     "typescript": "^3.9.5"
   },
   "peerDependencies": {

packages/stack/src/__tests__/index.test.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { View, Text, Button } from 'react-native';
+import { render, fireEvent } from 'react-native-testing-library';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import { createStackNavigator, StackScreenProps } from '../index';
+
+it('renders a stack navigator with screens', async () => {
+  const Test = ({ route, navigation }: StackScreenProps<ParamListBase>) => (
+    <View>
+      <Text>Screen {route.name}</Text>
+      <Button onPress={() => navigation.navigate('A')} title="Go to A" />
+      <Button onPress={() => navigation.navigate('B')} title="Go to B" />
+    </View>
+  );
+
+  const Stack = createStackNavigator();
+
+  const { findByText, queryByText } = render(
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="A" component={Test} />
+        <Stack.Screen name="B" component={Test} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+
+  expect(queryByText('Screen A')).not.toBeNull();
+  expect(queryByText('Screen B')).toBeNull();
+
+  fireEvent.press(await findByText('Go to B'));
+
+  expect(queryByText('Screen B')).not.toBeNull();
+});

yarn.lock

@@ -422,6 +422,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.1.tgz#ec5a5cf0eec925b66c60580328b122c01230a127"
   integrity sha512-fvoGeXt0bJc7VMWZGCAEBEMo/HAjW2mP8apF5eXK0wSqwLAVHAISCWRoLMBMUs2kqeaG77jltVqu4Hn8Egl3nA==
 
+"@babel/helper-plugin-utils@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
+  integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
+
 "@babel/helper-regex@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.10.1.tgz#021cf1a7ba99822f993222a001cc3fec83255b96"
@@ -897,6 +902,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.1"
 
+"@babel/plugin-syntax-jsx@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.4.tgz#39abaae3cbf710c4373d8429484e6ba21340166c"
+  integrity sha512-KCg9mio9jwiARCB7WAcQ7Y1q+qicILjoK8LP/VkPkEKaf5dkaZZK1EcTe91a3JJlZ3qy6L5s9X52boEYi8DM9g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
 "@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.8.3.tgz#3995d7d7ffff432f6ddc742b47e730c054599897"
@@ -904,7 +916,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0", "@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.0.0", "@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0", "@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
   integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
@@ -939,7 +951,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-optional-chaining@^7.8.0", "@babel/plugin-syntax-optional-chaining@^7.8.3":
+"@babel/plugin-syntax-optional-chaining@^7.0.0", "@babel/plugin-syntax-optional-chaining@^7.8.0", "@babel/plugin-syntax-optional-chaining@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
   integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
@@ -1383,6 +1395,14 @@
     "@babel/helper-plugin-utils" "^7.10.1"
     "@babel/plugin-syntax-jsx" "^7.10.1"
 
+"@babel/plugin-transform-react-jsx-self@^7.0.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.10.4.tgz#cd301a5fed8988c182ed0b9d55e9bd6db0bd9369"
+  integrity sha512-yOvxY2pDiVJi0axdTWHSMi5T0DILN+H+SaeJeACHKjQLezEzhLx9nEF9xgpBLPtkZsks9cnb5P9iBEi21En3gg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
+
 "@babel/plugin-transform-react-jsx-self@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.10.1.tgz#22143e14388d72eb88649606bb9e46f421bc3821"
@@ -1825,13 +1845,6 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2":
-  version "7.10.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.2.tgz#d103f21f2602497d38348a32e008637d506db839"
-  integrity sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
 "@babel/template@^7.0.0", "@babel/template@^7.3.3", "@babel/template@^7.7.4", "@babel/template@^7.8.3", "@babel/template@^7.8.6":
   version "7.8.6"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.6.tgz#86b22af15f828dfb086474f964dcc3e39c43ce2b"
@@ -7575,7 +7588,7 @@ core-js@^2.2.2, core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.0, core-js@^2.6.5:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
   integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
 
-core-js@^3.2.1, core-js@^3.6.5:
+core-js@^3.2.1:
   version "3.6.5"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
   integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
@@ -13745,6 +13758,50 @@ metro-react-native-babel-preset@^0.56.0, metro-react-native-babel-preset@^0.56.4
     "@babel/template" "^7.0.0"
     react-refresh "^0.4.0"
 
+metro-react-native-babel-preset@^0.59.0:
+  version "0.59.0"
+  resolved "https://registry.yarnpkg.com/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.59.0.tgz#20e020bc6ac9849e1477de1333d303ed42aba225"
+  integrity sha512-BoO6ncPfceIDReIH8pQ5tQptcGo5yRWQXJGVXfANbiKLq4tfgdZB1C1e2rMUJ6iypmeJU9dzl+EhPmIFKtgREg==
+  dependencies:
+    "@babel/plugin-proposal-class-properties" "^7.0.0"
+    "@babel/plugin-proposal-export-default-from" "^7.0.0"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.0.0"
+    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.0.0"
+    "@babel/plugin-proposal-optional-chaining" "^7.0.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.0.0"
+    "@babel/plugin-syntax-export-default-from" "^7.0.0"
+    "@babel/plugin-syntax-flow" "^7.2.0"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.0.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.0.0"
+    "@babel/plugin-transform-arrow-functions" "^7.0.0"
+    "@babel/plugin-transform-block-scoping" "^7.0.0"
+    "@babel/plugin-transform-classes" "^7.0.0"
+    "@babel/plugin-transform-computed-properties" "^7.0.0"
+    "@babel/plugin-transform-destructuring" "^7.0.0"
+    "@babel/plugin-transform-exponentiation-operator" "^7.0.0"
+    "@babel/plugin-transform-flow-strip-types" "^7.0.0"
+    "@babel/plugin-transform-for-of" "^7.0.0"
+    "@babel/plugin-transform-function-name" "^7.0.0"
+    "@babel/plugin-transform-literals" "^7.0.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.0.0"
+    "@babel/plugin-transform-object-assign" "^7.0.0"
+    "@babel/plugin-transform-parameters" "^7.0.0"
+    "@babel/plugin-transform-react-display-name" "^7.0.0"
+    "@babel/plugin-transform-react-jsx" "^7.0.0"
+    "@babel/plugin-transform-react-jsx-self" "^7.0.0"
+    "@babel/plugin-transform-react-jsx-source" "^7.0.0"
+    "@babel/plugin-transform-regenerator" "^7.0.0"
+    "@babel/plugin-transform-runtime" "^7.0.0"
+    "@babel/plugin-transform-shorthand-properties" "^7.0.0"
+    "@babel/plugin-transform-spread" "^7.0.0"
+    "@babel/plugin-transform-sticky-regex" "^7.0.0"
+    "@babel/plugin-transform-template-literals" "^7.0.0"
+    "@babel/plugin-transform-typescript" "^7.5.0"
+    "@babel/plugin-transform-unicode-regex" "^7.0.0"
+    "@babel/template" "^7.0.0"
+    react-refresh "^0.4.0"
+
 metro-react-native-babel-transformer@^0.56.0:
   version "0.56.4"
   resolved "https://registry.yarnpkg.com/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.56.4.tgz#3c6e48b605c305362ee624e45ff338656e35fc1d"