(DOCSP-33596) Fix React Native test suite issue (#3067)

A previous PR commented out `module:metro-react-native-babel-preset` in
`bable.config.cjs`. This line is necessary for CI Jest tests to work.
So, it should remain uncommented in the source repo. However, it needs
to be commented out to work with Metro and run local simulators.

Still haven't been able to figure out a real fix for this issue.

This PR also includes a couple minor changes to test code to account for
configuration changes.

## Pull Request Info

### Jira

- https://jira.mongodb.org/browse/DOCSP-33596

### Review Guidelines


[REVIEWING.md](https://github.com/mongodb/docs-realm/blob/master/REVIEWING.md)

### Animal Wearing a Hat

<img
src="https://blenderartists.org/uploads/default/original/4X/9/c/8/9c8b0f8cfac4baf8c58b93b8a55ee1cfa811a863.jpeg"
width=400>

examples/react-native/v12/TestApp/babel.config.cjs

@@ -1,7 +1,7 @@
 module.exports = {
   presets: [
     ['@babel/preset-env', {targets: {node: 'current'}}],
-    // 'module:metro-react-native-babel-preset',
+    'module:metro-react-native-babel-preset',
     '@babel/preset-typescript',
   ],
   plugins: ['react-native-reanimated/plugin'],

examples/react-native/v12/TestApp/jest.config.ts

@@ -8,8 +8,10 @@ const config: Config = {
   preset: 'react-native',
   testTimeout: 30000,
   roots: ['<rootDir>/src/'],
-  setupFiles: ['./testSetup.ts'],
-  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
+  setupFilesAfterEnv: [
+    '@testing-library/jest-native/extend-expect',
+    './testSetup.ts',
+  ],
   transform: {
     '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
   },

examples/react-native/v12/TestApp/src/components/authentication/login/Login.test.tsx

@@ -6,7 +6,7 @@ import {render, screen, userEvent, within} from '@testing-library/react-native';
 
 describe('Log in with App Services auth providers', () => {
   // Make sure the same user isn't persisted across tests.
-  beforeEach(async () => {
+  afterEach(async () => {
     render(<LoginExample />);
 
     const user = userEvent.setup();
@@ -22,9 +22,8 @@ describe('Log in with App Services auth providers', () => {
     }
 
     // <Login> component should render because there's no auth'd user
-    const newLoginAnonymousButton = await screen.findByTestId(
-      'log-in-anonymous',
-    );
+    const newLoginAnonymousButton =
+      await screen.findByTestId('log-in-anonymous');
     expect(newLoginAnonymousButton).toBeInTheDocument;
   });
 
@@ -97,9 +96,8 @@ describe('Log in with App Services auth providers', () => {
     const emailInput = await screen.findByTestId('email-input');
     const passwordInput = await screen.findByTestId('password-input');
     const registerButton = await screen.findByTestId('register-button');
-    const sendResetPasswordEmailButton = await screen.findByTestId(
-      'send-reset-email',
-    );
+    const sendResetPasswordEmailButton =
+      await screen.findByTestId('send-reset-email');
 
     // Register user with email and password
     await user.type(emailInput, userEmail);

examples/react-native/v12/TestApp/src/components/subscribe-api/SubscribeApi.test.tsx

@@ -8,11 +8,6 @@ import {render, screen, userEvent} from '@testing-library/react-native';
 // pass.
 
 describe('Subscribe API behavior tests', () => {
-  beforeEach(async () => {
-    // Close and remove all realms in the default directory.
-    Realm.clearTestState();
-  });
-
   test('Basic subscription with a name', async () => {
     // This test consistently fails in CI. For whatever reason, the
     // initial sync takes more than 10 seconds, which is the max

examples/react-native/v12/TestApp/testSetup.ts

@@ -1,7 +1,7 @@
-import {jest} from '@jest/globals';
+import {jest, beforeEach} from '@jest/globals';
 
 // Needed to clear the test state.
-import {flags} from 'realm';
+import Realm, {flags} from 'realm';
 flags.ALLOW_CLEAR_TEST_STATE = true;
 
 // avoid error: Cannot find module 'NativeAnimatedHelper'
@@ -13,3 +13,11 @@ global.console = {
   error: jest.fn(),
   warn: jest.fn(),
 };
+
+beforeEach(async () => {
+  // Close and remove all realms in the default directory.
+  Realm.clearTestState();
+
+  // Use promise hack to wait realm to clear
+  await new Promise(r => setTimeout(r, 100));
+});