bug: failing to integrate jest testing

[mikecfisher]

I'm trying to build a monorepo that contains our backend, expo mobile app and nextjs web app. We'd also like to have a packages/ui folder that contains React Native components we create build with Nativewind and use them in the mobile app and nextjs app.

I have it all configured to work properly at runtime but our jest testing seems to be an issue.

Jest tests inside our ui package were failing. Running npx expo install jest seemed to fix that. Jest tests inside our apps/mobile app were failing and npx expo install jest got us a bit further.

However the issue I have now is the only way I can get jest tests to pass in apps/mobile is if I do jest.mock('ui') in the jest setup for apps/mobile.

The error Jest throws is:

 FAIL  src/app.test.tsx
  ● Test suite failed to run

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

      at invariant (../../node_modules/invariant/invariant.js:40:15)
      at Object.<anonymous> (../../packages/ui/node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:181:3)
      at Object.<anonymous> (../../packages/ui/node_modules/react-native/Libraries/TurboModule/TurboModuleRegistry.js:11:23)

I would think that's because the ui package is including native modules but right now its just an incredible simple button we're trying to import.

import React from 'react'
import { styled } from 'nativewind'
import { Text, TextProps, Pressable, PressableProps, View } from 'react-native'

export type ButtonProps = PressableProps & {
  textStyle?: TextProps['style']
  children?: JSX.Element | JSX.Element[] | string
}

export const Button = styled(
  ({ textStyle, children, ...props }: ButtonProps) => {
    return (
      <Pressable {...props} accessibilityRole="button">
        <View style={textStyle}>
          <Text>{children}</Text>
        </View>
      </Pressable>
    )
  },
  'text-indigo-50'
)

The ui package.json is also simple and just looks like this

{
  "name": "ui",
  "version": "0.0.0",
  "main": "./index.ts",
  "license": "MIT",
  "scripts": {
    "lint": "eslint *.ts*",
    "test": "jest .",
    "tsc": "tsc --noEmit"
  },
  "devDependencies": {
    "@testing-library/jest-native": "^5.0.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/react-native": "^11.2.0",
    "@types/jest": "^29.1.2",
    "@types/react": "^18.0.21",
    "@types/react-dom": "^18.0.5",
    "@types/react-native": "~0.69.6",
    "eslint": "^7.32.0",
    "eslint-config-heir-base": "workspace:*",
    "jest": "^26.6.3",
    "jest-expo": "^46.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^4.5.2"
  },
  "dependencies": {
    "nativewind": "^2.0.5",
    "react-native": "0.69.6"
  }
}

Any idea what could be incorrect regarding our configuration?

[juliusmarminge]

Not familiar with jest on native.

Are you building the UI package or import & transpiling?