Upgrade jest to 28, detox to 20, breaking changes

.detoxrc.js

@@ -7,9 +7,13 @@ const apkFilenamePrefix = `com.inaturalistreactnative-v${version}+${versionCode}
 
 /** @type {Detox.DetoxConfig} */
 module.exports = {
-  testRunner: "jest",
-  runnerConfig: "e2e/config.json",
-  skipLegacyWorkersInjection: true,
+  testRunner: {
+    $0: "jest",
+    args: {
+      config: "e2e/jest.config.js",
+      _: ["e2e"],
+    },
+  },
   apps: {
     "ios.debug": {
       type: "ios.app",

e2e/config.json

@@ -1,9 +0,0 @@
-{
-    "maxWorkers": 1,
-    "testEnvironment": "./environment",
-    "testRunner": "jest-circus/runner",
-    "testTimeout": 120000,
-    "testRegex": "\\.e2e\\.js$",
-    "reporters": ["detox/runners/jest/streamlineReporter"],
-    "verbose": true
-}

e2e/environment.js

@@ -1,24 +0,0 @@
-const {
-  DetoxCircusEnvironment,
-  SpecReporter,
-  WorkerAssignReporter
-} = require( "detox/runners/jest-circus" );
-
-class CustomDetoxEnvironment extends DetoxCircusEnvironment {
-  constructor( config, context ) {
-    super( config, context );
-
-    // Can be safely removed, if you are content with the default value (=300000ms)
-    this.initTimeout = 300000;
-
-    // This takes care of generating status logs on a per-spec basis.
-    // By default, Jest only reports at file-level.
-    // This is strictly optional.
-    this.registerListeners( {
-      SpecReporter,
-      WorkerAssignReporter
-    } );
-  }
-}
-
-module.exports = CustomDetoxEnvironment;

e2e/jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  maxWorkers: 1,
+  testTimeout: 120000,
+  rootDir: "..",
+  testMatch: ["<rootDir>/e2e/**/*.e2e.js"],
+  verbose: true,
+  reporters: ["detox/runners/jest/reporter"],
+  globalSetup: "detox/runners/jest/globalSetup",
+  globalTeardown: "detox/runners/jest/globalTeardown",
+  testEnvironment: "detox/runners/jest/testEnvironment"
+};

package.json

@@ -116,10 +116,10 @@
     "@faker-js/faker": "^7.6.0",
     "@tanstack/eslint-plugin-query": "^4.29.0",
     "@testing-library/jest-native": "^5.4.2",
-    "@testing-library/react-native": "^10.1.1",
-    "babel-jest": "^27.0.0",
+    "@testing-library/react-native": "^11.0.0",
+    "babel-jest": "^28.0.0",
     "babel-plugin-module-resolver": "^5.0.0",
-    "detox": "^19.13.0",
+    "detox": "^20.0.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-import-resolver-babel-module": "^5.3.2",
@@ -141,8 +141,8 @@
     "fluent_conv": "^3.2.0",
     "glob": "^7.2.3",
     "husky": "^8.0.3",
-    "jest": "^27.0.0",
-    "jest-circus": "^27.0.0",
+    "jest": "^28.0.0",
+    "jest-circus": "^28.0.0",
     "metro-config": "0.72.3",
     "metro-react-native-babel-preset": "0.72.3",
     "nock": "^13.3.0",

tests/unit/components/Messages/Messages.test.js

@@ -29,7 +29,9 @@ jest.mock( "@react-navigation/native", ( ) => {
 // Before migrating to Jest 27 this line was:
 // jest.useFakeTimers();
 // TODO: replace with modern usage of jest.useFakeTimers
-jest.useFakeTimers( "legacy" );
+jest.useFakeTimers( {
+  legacyFakeTimers: true
+} );
 
 const renderMessages = ( ) => render(
   <INatPaperProvider>

tests/unit/components/ObsDetails/DataTab.test.js

@@ -25,7 +25,9 @@ jest.mock( "sharedHooks/useIsConnected", ( ) => ( {
 // Before migrating to Jest 27 this line was:
 // jest.useFakeTimers();
 // TODO: replace with modern usage of jest.useFakeTimers
-jest.useFakeTimers( "legacy" );
+jest.useFakeTimers( {
+  legacyFakeTimers: true
+} );
 
 const mockObservation = factory( "LocalObservation", {
   created_at: "2022-11-27T19:07:41-08:00",