Shenanigans to get the RN test passing again

Author: markerikson

.github/workflows/test.yml

@@ -51,7 +51,7 @@ jobs:
       fail-fast: false
       matrix:
         node: ['16.x']
-        ts: ['4.7', '4.8', '4.9', '5.0']
+        ts: ['4.7', '4.8', '4.9', '5.0', '5.1']
     steps:
       - name: Checkout repo
         uses: actions/checkout@v3

.babelrc.js renamed to babel.config.js

@@ -16,6 +16,7 @@ module.exports = {
       },
     ],
     '@babel/preset-typescript',
+    'module:metro-react-native-babel-preset',
   ],
   plugins: [
     ['@babel/proposal-decorators', { legacy: true }],

jest.config.js

@@ -1,11 +1,3 @@
-const { defaults: tsjPreset } = require('ts-jest/presets')
-
-const defaults = {
-  coverageDirectory: './coverage/',
-  collectCoverage: true,
-  testURL: 'http://localhost',
-}
-
 process.env.TS_JEST_DISABLE_VER_CHECKER = true
 
 const NORMAL_TEST_FOLDERS = ['components', 'hooks', 'integration', 'utils']
@@ -14,20 +6,22 @@ const tsTestFolderPath = (folderName) =>
   `<rootDir>/test/${folderName}/**/*.{ts,tsx}`
 
 const tsStandardConfig = {
-  ...defaults,
   displayName: 'ReactDOM 18',
   preset: 'ts-jest',
   testMatch: NORMAL_TEST_FOLDERS.map(tsTestFolderPath),
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/jest.setupAfter.js'],
 }
 
 const rnConfig = {
-  ...defaults,
   displayName: 'React Native',
   testMatch: [tsTestFolderPath('react-native')],
   preset: 'react-native',
   transform: {
-    '^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
-    ...tsjPreset.transform,
+    '^.+\\.(js|jsx|ts|tsx)$': [
+      'babel-jest',
+      { configFile: './babel.config.js' }, // <- cannot use rootDir here
+    ],
   },
 }
 

jest.setupAfter.js

@@ -0,0 +1,3 @@
+const { TextEncoder, TextDecoder } = require('util')
+global.TextEncoder = TextEncoder
+global.TextDecoder = TextDecoder

test/react-native/batch-integration.tsx

@@ -465,10 +465,12 @@ describe('React Native', () => {
   })
 
   describe('useSelector', () => {
-    it('should stay in sync with the store', () => {
+    it('should stay in sync with the store', async () => {
       // https://github.com/reduxjs/react-redux/issues/1437
 
-      jest.useFakeTimers()
+      function delay(ms: number) {
+        return new Promise((resolve) => setTimeout(resolve, ms))
+      }
 
       // Explicitly silence "not wrapped in act()" messages for this test
       const spy = jest.spyOn(console, 'error')
@@ -587,21 +589,22 @@ describe('React Native', () => {
         rtl.fireEvent.press(button)
       }
 
-      const clickAndRender = (rendered: RenderedType, testId: string) => {
+      const clickAndRender = async (rendered: RenderedType, testId: string) => {
         // Note: Normally we'd wrap this all in act(), but that automatically
         // wraps your code in batchedUpdates(). The point of this bug is that it
         // specifically occurs when you are _not_ batching updates!
         clickButton(rendered, testId)
-        jest.advanceTimersByTime(100)
+        // jest.advanceTimersByTime(100)
+        await delay(100)
         assertValuesMatch(rendered)
       }
 
       assertValuesMatch(rendered)
 
-      clickAndRender(rendered, 'setTimeout')
-      clickAndRender(rendered, 'standardBatching')
-      clickAndRender(rendered, 'unstableBatched')
-      clickAndRender(rendered, 'reactReduxBatch')
+      await clickAndRender(rendered, 'setTimeout')
+      await clickAndRender(rendered, 'standardBatching')
+      await clickAndRender(rendered, 'unstableBatched')
+      await clickAndRender(rendered, 'reactReduxBatch')
 
       spy.mockRestore()
     })