[v0.72] Jests tests that use Flyout and Popup don't work

[chiaramooney]

Problem Description

For RNW apps on v0.72, Jest snapshot tests that use Flyout and Popup fail with error:

Invariant Violation: __fbBatchedBridgeConfig is not set, cannot invoke native modules

  168 |           <Text style={{color: colors.text}}>Open Popup</Text>
  169 |         </TouchableHighlight>
> 170 |         <Flyout
      |          ^
  171 |           isOpen={showFlyout1}
  172 |           onDismiss={() => {
  173 |             setShowFlyout1(false);`

Related to microsoft/react-native-gallery#344

Culprit

Callstack shows that .ios files are being used instead of .windows platform files resulting in errors.

Fix

Use @rnx-kit/jest-preset instead of react-native as your app's selected preset in your jest.config.js file. Then edit your test command to be npx react-native rnx-test --platform windows.

You'll also need to add @rnx-it/cli and @rnx-kit/jest-preset to your project's devDependencies.

Note with this change you can now remove the transformIgnorePatterns entry from your jest.config.js file unless you have other community modules that need transforming.

Steps To Reproduce

1. Create a fresh v0.72 RNW app.
2. Edit jest.config.js to be

module.exports = {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!(react-native|@react-native|react-native-windows|@react-native-windows/)"
    ],
};

3. Edit App-test.js to include

import {Flyout} from 'react-native';

test('Control', () => {
  const tree = create(<Flyout />).toJSON();
  expect(tree).toMatchSnapshot();
});

4. Run yarn test
5. Observe Invariant Violation: __fbBatchedBridgeConfig is not set, cannot invoke native modules error.

Expected Results

Test should run successfully.

CLI version

11.3.3

Environment

System:
  OS: Windows 10 10.0.25309
  CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
  Memory: 35.54 GB / 63.84 GB
Binaries:
  Node:
    version: 20.4.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.5
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 9.7.2
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.17763.0
      - 10.0.18362.0
      - 10.0.19041.0
      - 10.0.22000.0
      - 10.0.22621.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.6.33829.357 (Visual Studio Enterprise 2022)
    - 16.11.33801.447 (Visual Studio Enterprise 2019)
Languages:
  Java:
    version: 11.0.16.1
    path: C:\Program Files\Eclipse Adoptium\jdk-11.0.16.101-hotspot\bin\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.0.0
    wanted: 18.0.0
  react-native:
    installed: 0.72.1
    wanted: ^0.72.0
  react-native-windows:
    installed: 0.72.0
    wanted: 0.72.0
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: false
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Target Platform Version

10.0.19041

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2022

Build Configuration

None

Snack, code example, screenshot, or link to a repository

No response

[jonthysell]

Minimal repro app here: https://github.com/jonthysell/rnw-issue-11938

Commit where the bug repros: https://github.com/jonthysell/rnw-issue-11938/tree/9ccb93bffa81f43d6a81c576b8f74e81d16975eb

Commit with a potential fix: https://github.com/jonthysell/rnw-issue-11938/tree/f21b7fbd02af44a2c55a87370f5b5f9a7efbd6c5

[chiaramooney]

We can close this now. Bug was mostly to track fix that apps must add if they hit this error.