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

[vanGalilea]

Describe the bug

__fbBatchedBridgeConfig is not set, cannot invoke native modules error occurs when trying to render a simple RN component.

Important to mention, that this is an expo app in a monorepo, this is the repo/commit. The test is dead simple and fails due to wrong configuration I think.

index.test.tsx

// index.test.tsx
import React from 'react';
import {Text, View} from 'react-native';
import {render} from '@testing-library/react-native';

const HelloWorld = () => (
  <View>
    <Text>Hello from the machine!</Text>
  </View>
);

describe('<App />', () => {
  it('has 2 child', () => {
    render(<HelloWorld />);
  });
});

jest.config.js

//jest.config.js
module.exports = {
  preset: 'react-native',
  setupFilesAfterEnv: ['./jest.setup.js'],
  transformIgnorePatterns: [
    'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)',
  ],
};

Expected behavior

No errors when rendering a simple RN component.

Steps to Reproduce

git clone git@github.com:vanGalilea/react-native-testing.git
cd react-native-testing/
git checkout feat/expo-app
yarn
cd apps/rn-expo-app/
yarn test

Screenshots/ Full Error

 Trying to detect host component names triggered the following error:

    __fbBatchedBridgeConfig is not set, cannot invoke native modules

    There seems to be an issue with your configuration that prevents React Native Testing Library from working correctly.
    Please check if you are using compatible versions of React Native and React Native Testing Library.

      11 | describe('<App />', () => {
      12 |   it('has 2 child', () => {
    > 13 |     render(<HelloWorld />);
         |           ^
      14 |   });
      15 | });
      16 |

      at detectHostComponentNames (../../node_modules/@testing-library/react-native/src/helpers/host-component-names.tsx:56:11)
      at detectHostComponentNames (../../node_modules/@testing-library/react-native/src/helpers/host-component-names.tsx:27:30)
      at renderInternal (../../node_modules/@testing-library/react-native/src/render.tsx:49:40)
      at renderInternal (../../node_modules/@testing-library/react-native/src/render.tsx:32:10)
      at Object.<anonymous> (__tests__/app/index.test.tsx:13:11)

Versions

Weirdly enough when running: npx envinfo --npmPackages react,react-native,react-test-renderer,@testing-library/react-native

I only get:

  npmPackages:
    react-native: 0.73.2 => 0.73.2 

So from yarn.lock: @testing-library/react-native => 12.4.3 jest => 29.7.0 jest-expo => 50.0.1 react => 18.2.0 react-native => 0.73.2

[mdjastrzebski]

@vanGalilea You seem to be missing react-test-renderer.

[vanGalilea]

@mdjastrzebski thanks for your reaction, I've just added react-test-renderer to my deps. yet no luck :/ the same error again

[mdjastrzebski]

I've checked out your repo and see the error. Not sure what could have caused it, looks like some React misconfiguration.

I've updated our examples/basic app to the latest expo with RN 73 to confirm it's not a general issues. It one works, so this is not some general RN 73 issue.

[mdjastrzebski]

I've got the root cause. You are using a monorepo setup which results in both apps (expo and cli) installing different versions of react-native package in the root node_modules. This confuses the packager at the runtime, resulting in two different RN being loaded at the same time. If I update the CLI app version of RN to match Expo, then Expo tests start working.

To properly resolve this and avoid it in the future, you should probably use nohoist setup for both apps.

[vanGalilea]

@mdjastrzebski thanks for the deep dive and research, it all makes sense now! Thanks for taking the time and effort to have a look!