Upgrade expo sdk 44 (#517)

* Upgrade expo sdk 44 * Update webpack config * Fix cannot destructure config err Refer callstack/react-native-testing-library#743 * Downgrade svgr to 5 This is only compatible with webpack 5 but expo-cli is still using 4. * Fix tests downgrading `jest-expo` to 43 * Tested with jest-expo 44.0.0
hyochan · Dec 25, 2021 · aa9882f · aa9882f
1 parent 347950a
commit aa9882f
Show file tree

Hide file tree

Showing 15 changed files with 1,619 additions and 589 deletions.
diff --git a/client/__mocks__/expo-video-thumbnails.ts b/client/__mocks__/expo-video-thumbnails.ts
@@ -4,12 +4,14 @@ export const getThumbnailAsync = (
   uri: string,
 ): Promise<VideoThumbnailsResult> => {
   return new Promise((resolve, reject) => {
-    if (uri)
+    if (uri) {
       resolve({
         uri: 'https://i.picsum.photos/id/344/200/300.jpg?hmac=hFZM-uJoRMyNATe_kjGvS2NGGP60jqqP64vpGQ98VAo',
         width: 200,
         height: 300,
       });
-    else reject({error: 'no uri'});
+    } else {
+      reject({error: 'no uri'});
+    }
   });
 };
diff --git a/client/__mocks__/react-native-reanimated.ts b/client/__mocks__/react-native-reanimated.ts
@@ -0,0 +1,3 @@
+export default {
+  interpolate: jest.fn(),
+};
diff --git a/client/app.config.ts b/client/app.config.ts
@@ -4,7 +4,7 @@ import {ConfigContext, ExpoConfig} from '@expo/config';
 
 import {version} from './package.json';
 
-const androidVersionCode = 31;
+const androidVersionCode = 33;
 
 export default ({config}: ConfigContext): ExpoConfig => ({
   ...config,

diff --git a/client/jest.config.js b/client/jest.config.js
@@ -32,7 +32,12 @@ module.exports = {
     '\\.svg': '<rootDir>/__mocks__/svgMock.js',
     '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'babel-jest',
   },
-  setupFiles: [...expoPreset.setupFiles, '<rootDir>/test/jestSetup.ts'],
+  setupFiles: [
+    ...expoPreset.setupFiles,
+    '<rootDir>/test/jestSetup.js',
+    '<rootDir>/test/jestSetup.ts',
+    './node_modules/react-native-gesture-handler/jestSetup.js',
+  ],
   cacheDirectory: '.jest/cache',
   setupFilesAfterEnv: ['./test/setupTest.ts'],
   haste: {

diff --git a/client/package.json b/client/package.json
@@ -1,7 +1,7 @@
 {
   "name": "hackatalk",
   "private": true,
-  "version": "1.12.0",
+  "version": "1.13.0",
   "main": "node_modules/expo/AppEntry.js",
   "description": "Opensource chat app",
   "author": "dooboolab",
@@ -33,63 +33,63 @@
   "dependencies": {
     "@apollo/client": "^3.5.6",
     "@emotion/native": "^11.0.0",
-    "@emotion/react": "^11.7.0",
+    "@emotion/react": "^11.7.1",
     "@expo/match-media": "^0.1.0",
     "@expo/react-native-action-sheet": "^3.12.0",
     "@expo/vector-icons": "^12.0.5",
     "@react-native-async-storage/async-storage": "~1.15.14",
-    "@react-native-masked-view/masked-view": "0.2.5",
+    "@react-native-masked-view/masked-view": "0.2.6",
     "@react-navigation/bottom-tabs": "^6.0.9",
     "@react-navigation/core": "^6.1.0",
     "@react-navigation/material-top-tabs": "^6.0.6",
     "@react-navigation/native": "^6.0.6",
     "@react-navigation/stack": "^6.0.11",
     "apollo-upload-client": "^17.0.0",
     "dooboo-ui": "^0.1.54",
-    "expo": "^43.0.4",
-    "expo-ads-admob": "~11.0.3",
-    "expo-app-loading": "~1.2.1",
-    "expo-apple-authentication": "~4.0.3",
-    "expo-asset": "~8.4.3",
-    "expo-auth-session": "~3.4.2",
-    "expo-av": "~10.1.3",
-    "expo-constants": "~12.1.3",
-    "expo-crypto": "~10.0.3",
-    "expo-device": "~4.0.3",
-    "expo-image-manipulator": "~10.1.2",
-    "expo-image-picker": "~11.0.3",
-    "expo-linear-gradient": "~10.0.3",
-    "expo-localization": "~11.0.0",
-    "expo-notifications": "~0.13.3",
-    "expo-random": "~12.0.1",
-    "expo-screen-orientation": "~4.0.3",
-    "expo-splash-screen": "~0.13.5",
-    "expo-updates": "~0.10.15",
-    "expo-video-thumbnails": "~6.0.3",
-    "expo-web-browser": "~10.0.3",
-    "graphql": "^16.1.0",
+    "expo": "^44.0.0",
+    "expo-ads-admob": "~12.0.0",
+    "expo-app-loading": "~1.3.0",
+    "expo-apple-authentication": "~4.1.0",
+    "expo-asset": "~8.4.5",
+    "expo-auth-session": "~3.5.0",
+    "expo-av": "~10.2.0",
+    "expo-constants": "~13.0.0",
+    "expo-crypto": "~10.1.1",
+    "expo-device": "~4.1.0",
+    "expo-image-manipulator": "~10.2.0",
+    "expo-image-picker": "~12.0.1",
+    "expo-linear-gradient": "~11.0.0",
+    "expo-localization": "~12.0.0",
+    "expo-notifications": "~0.14.0",
+    "expo-random": "~12.1.1",
+    "expo-screen-orientation": "~4.1.1",
+    "expo-splash-screen": "~0.14.1",
+    "expo-updates": "~0.11.3",
+    "expo-video-thumbnails": "~6.1.0",
+    "expo-web-browser": "~10.1.0",
+    "graphql": "^16.2.0",
     "i18n-js": "^3.8.0",
     "immer": "^9.0.7",
     "mime": "^3.0.0",
     "moment": "^2.29.1",
     "nanoid": "^3.1.30",
     "react": "17.0.2",
-    "react-native": "0.64.3",
+    "react-native": "^0.64.3",
     "react-native-appearance": "~0.3.4",
     "react-native-error-boundary": "^1.1.12",
-    "react-native-gesture-handler": "~1.10.2",
+    "react-native-gesture-handler": "~2.1.0",
     "react-native-get-random-values": "~1.7.1",
     "react-native-modalbox": "^2.0.2",
-    "react-native-pager-view": "5.4.6",
+    "react-native-pager-view": "5.4.9",
     "react-native-parsed-text": "^0.0.22",
-    "react-native-reanimated": "~2.2.0",
+    "react-native-reanimated": "~2.3.1",
     "react-native-safe-area-context": "3.3.2",
     "react-native-scalable-image": "^1.1.0",
-    "react-native-screens": "~3.8.0",
+    "react-native-screens": "~3.10.1",
     "react-native-svg": "12.1.1",
     "react-native-tab-view": "^3.1.1",
-    "react-native-web": "^0.17.5",
-    "react-native-webview": "11.13.0",
+    "react-native-web": "0.17.5",
+    "react-native-webview": "11.15.0",
     "react-navigation-stack": "^2.10.4",
     "react-relay": "^12.0.0",
     "react-responsive": "^8.2.0",
@@ -99,68 +99,68 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.16.0",
-    "@babel/core": "^7.16.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.0",
-    "@babel/plugin-proposal-decorators": "7.16.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.16.0",
-    "@babel/plugin-transform-block-scoping": "^7.16.0",
-    "@babel/plugin-transform-runtime": "^7.16.4",
-    "@babel/preset-react": "^7.16.0",
-    "@babel/preset-typescript": "^7.16.0",
-    "@babel/runtime": "^7.16.3",
+    "@babel/core": "^7.16.5",
+    "@babel/plugin-proposal-class-properties": "^7.16.5",
+    "@babel/plugin-proposal-decorators": "7.16.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.16.5",
+    "@babel/plugin-transform-block-scoping": "^7.16.5",
+    "@babel/plugin-transform-runtime": "^7.16.5",
+    "@babel/preset-react": "^7.16.5",
+    "@babel/preset-typescript": "^7.16.5",
+    "@babel/runtime": "^7.16.5",
     "@dooboo/eslint-config": "^1.2.5",
-    "@emotion/babel-plugin": "^11.3.0",
-    "@expo/metro-config": "^0.3.5",
-    "@expo/webpack-config": "^0.16.12",
+    "@emotion/babel-plugin": "^11.7.1",
+    "@expo/metro-config": "^0.3.7",
+    "@expo/webpack-config": "~0.16.14",
     "@graphql-codegen/cli": "^2.3.0",
     "@graphql-codegen/typescript": "^2.4.1",
     "@graphql-codegen/typescript-document-nodes": "^2.2.1",
     "@graphql-codegen/typescript-graphql-files-modules": "^2.1.0",
     "@graphql-codegen/typescript-operations": "^2.2.1",
     "@graphql-codegen/typescript-react-apollo": "^3.2.2",
     "@graphql-tools/relay-operation-optimizer": "6.4.1",
-    "@svgr/webpack": "^6.1.1",
+    "@svgr/webpack": "^5",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/react-native": "^9.0.0",
     "@types/apollo-upload-client": "^14.1.0",
     "@types/expo": "^33.0.1",
     "@types/i18n-js": "^3.8.2",
     "@types/jest": "^27.0.3",
     "@types/mime": "^2.0.3",
-    "@types/react": "^17.0.37",
-    "@types/react-native": "~0.66.8",
+    "@types/react": "~17.0.37",
+    "@types/react-native": "~0.66.9",
     "@types/react-native-modalbox": "^1.4.10",
     "@types/react-relay": "^11.0.3",
-    "@types/react-responsive": "^8.0.4",
+    "@types/react-responsive": "^8.0.5",
     "@types/react-test-renderer": "^17.0",
     "@types/relay-test-utils": "^6.0.5",
     "abort-controller": "^3.0.0",
     "babel-plugin-inline-dotenv": "^1.6.0",
     "babel-plugin-relay": "^12.0.0",
-    "babel-preset-expo": "8.5.1",
+    "babel-preset-expo": "9.0.2",
     "codecov": "^3.8.3",
-    "eslint": "^8.4.1",
+    "eslint": "^8.5.0",
     "eslint-plugin-i18n-json": "^3.1.0",
     "get-graphql-schema": "^2.1.2",
     "import-sort-style-eslint": "^6.0.0",
-    "jest": "^27.4.4",
-    "jest-expo": "^43.0.1",
+    "jest": "^27.4.5",
+    "jest-expo": "44.0.0",
     "jest-fetch-mock": "^3.0.3",
     "jetifier": "^2.0.0",
     "mockdate": "^3.0.5",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.5.1",
     "prettier-plugin-import-sort": "^0.0.7",
-    "react-dom": "^17.0.2",
+    "react-dom": "17.0.2",
     "react-native-svg-transformer": "^0.14.3",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "17",
     "relay-compiler": "^12.0.0",
     "relay-compiler-language-typescript": "^15.0.0",
     "relay-config": "^12.0.1",
     "relay-test-utils": "^12.0.0",
-    "ts-jest": "^27.1.1",
-    "typescript": "^4.5.3"
+    "ts-jest": "^27.1.2",
+    "typescript": "~4.5.4"
   },
   "importSort": {
     ".js, .jsx": {
@@ -172,5 +172,8 @@
       "style": "eslint",
       "options": {}
     }
+  },
+  "resolutions": {
+    "react-native/@jest/create-cache-key-function": "^27.0.2"
   }
 }
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -20,6 +20,7 @@ import RootNavigator from './components/navigations/RootStackNavigator';
 import {SnackbarProvider} from './providers/SnackbarProvider';
 import {ThemeProvider} from 'dooboo-ui';
 import {createRelayEnvironment} from './relay';
+import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 import {getString} from '../STRINGS';
 import {registerForPushNotificationsAsync} from './utils/noti';
 import {useAssets} from 'expo-asset';
@@ -112,4 +113,4 @@ const WrappedApp = new ComponentWrapper(RootNavigator)
   .wrap(AppearanceProvider, {})
   .build();
 
-export default WrappedApp;
+export default gestureHandlerRootHOC(WrappedApp);
diff --git a/client/src/components/navigations/__tests__/__snapshots__/AuthStackNavigator.test.tsx.snap b/client/src/components/navigations/__tests__/__snapshots__/AuthStackNavigator.test.tsx.snap
@@ -213,19 +213,46 @@ exports[`[Stack] navigator should renders without crashing 1`] = `
                             }
                           >
                             <View>
-                              <View
-                                accessible={true}
-                                focusable={true}
-                                onClick={[Function]}
-                                onResponderGrant={[Function]}
-                                onResponderMove={[Function]}
-                                onResponderRelease={[Function]}
-                                onResponderTerminate={[Function]}
-                                onResponderTerminationRequest={[Function]}
-                                onStartShouldSetResponder={[Function]}
+                              <mocked-view
+                                onPress={[Function]}
                                 style={
                                   Object {
-                                    "opacity": 1,
+                                    "animatedStyle": Object {
+                                      "current": Object {},
+                                    },
+                                    "initial": Object {
+                                      "updater": [Function],
+                                      "value": Object {
+                                        "height": 160,
+                                        "left": 525,
+                                        "position": "absolute",
+                                        "top": 400.2,
+                                        "width": 160,
+                                        "zIndex": 15,
+                                      },
+                                    },
+                                    "viewDescriptors": Object {
+                                      "add": [Function],
+                                      "batchToRemove": Set {},
+                                      "items": Array [],
+                                      "rebuildsharableViewDescriptors": [Function],
+                                      "remove": [Function],
+                                      "sharableViewDescriptors": MutableValue {
+                                        "_animation": null,
+                                        "_id": 4,
+                                        "_listeners": Array [],
+                                        "_setter": [Function],
+                                        "_value": Array [],
+                                      },
+                                      "tags": Set {},
+                                      "waitForInsertSync": false,
+                                      "waitForRemoveSync": false,
+                                    },
+                                    "viewsRef": Object {
+                                      "add": [Function],
+                                      "items": Set {},
+                                      "remove": [Function],
+                                    },
                                   }
                                 }
                                 testID="theme-test"
@@ -247,7 +274,7 @@ exports[`[Stack] navigator should renders without crashing 1`] = `
                                     }
                                   }
                                 />
-                              </View>
+                              </mocked-view>
                               <View
                                 style={
                                   Array [

diff --git a/client/src/components/pages/__tests__/SignIn.test.tsx b/client/src/components/pages/__tests__/SignIn.test.tsx
@@ -11,6 +11,7 @@ import AuthContext from '../../../providers/AuthProvider';
 import {FetchMock} from 'jest-fetch-mock';
 import React from 'react';
 import SignIn from '../SignIn';
+import {View} from 'react-native';
 import {createMockEnvironment} from 'relay-test-utils';
 import {getString} from '../../../../STRINGS';
 import mockReactNavigation from '@react-navigation/core';