Can't run test with Jest and Expo. ReferenceError: __DEV__ is not defined

74 views Asked by At

I'm not sure about the jest configuration; I tried a lot of combinations and still can't run a simple test.

My configurations:

package.json

{
  "scripts": {
    "start": "bun copy-env:okteto && expo start",
    "test": "jest --coverage=false",
    "testCoverage": "jest"
  },
  "dependencies": {
    "@bam.tech/react-native-image-resizer": "^3.0.7",
    "@config-plugins/react-native-blob-util": "^6.0.0",
    "@config-plugins/react-native-pdf": "^6.0.0",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-navigation/elements": "^1.3.21",
    "@shopify/flash-list": "1.4.3",
    "@tamagui/animate-presence": "^1.75.2",
    "@tamagui/animations-moti": "^1.75.2",
    "@tanstack/query-core": "^4.36.1",
    "@tanstack/react-query": "^4.36.1",
    "axios": "^1.5.1",
    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
    "config-plugin-react-native-intercom": "~1.10.1",
    "expo": "^49.0.16",
    "expo-auth-session": "~5.0.2",
    "expo-build-properties": "~0.8.3",
    "expo-constants": "~14.4.2",
    "expo-crypto": "~12.4.1",
    "expo-datadog": "^49.0.1",
    "expo-dev-client": "~2.4.11",
    "expo-device": "~5.4.0",
    "expo-document-picker": "~11.5.4",
    "expo-file-system": "~15.4.4",
    "expo-font": "~11.4.0",
    "expo-image": "~1.3.4",
    "expo-image-manipulator": "^11.5.0",
    "expo-image-picker": "~14.3.2",
    "expo-linking": "~5.0.2",
    "expo-location": "~16.1.0",
    "expo-media-library": "~15.4.1",
    "expo-router": "2.0.9",
    "expo-sharing": "~11.5.0",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "expo-system-ui": "~2.4.0",
    "expo-updates": "~0.18.16",
    "expo-web-browser": "~12.3.2",
    "jest": "^29.7.0",
    "jest-expo": "^49.0.0",
    "moti": "^0.27.0",
    "react": "18.2.0",
    "react-dom": "^18.2.0",
    "react-native": "0.72.6",
    "react-native-blob-util": "^0.19.2",
    "react-native-console-time-polyfill": "^1.2.3",
    "react-native-gesture-handler": "~2.12.1",
    "react-native-get-random-values": "~1.9.0",
    "react-native-image-viewing": "^0.2.2",
    "react-native-ios-context-menu": "^1.15.3",
    "react-native-reanimated": "~3.3.0",
    "react-native-redash": "^18.1.1",
    "react-native-safe-area-context": "4.7.3",
    "react-native-svg": "13.9.0",
    "react-test-renderer": "^18.2.0",
    "tamagui": "^1.75.2",
    "ts-jest": "29.1.2",
    "uuid": "^3.4.0",
    "zeego": "^1.7.2",
    "zod": "^3.22.4",
    "zustand": "^4.4.4"
  },
  "devDependencies": {
    "@babel/core": "^7.23.2",
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "@datadog/datadog-ci": "^2.22.1",
    "@testing-library/jest-native": "5.4.3",
    "@testing-library/react-native": "11.5.0",
    "@types/jest": "29.5.11",
    "@types/react": "18.2.55",
    "@types/react-test-renderer": "18.0.7",
    "react-native-svg-transformer": "^1.1.0",
    "rn-flipper-async-storage-advanced": "^1.0.5"
  },
  "resolutions": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-native": "~0.72.3",
    "metro": "^0.76.0",
    "metro-resolver": "^0.76.0",
    "react-native-svg": "13.9.0",
    "react-native-reanimated": "3.3.0",
    "react-native-safe-area-context": "4.7.3",
    "@react-navigation/core": "6.4.10",
    "react-native-gesture-handler": "2.12.1"
  },
  "private": true,
  "packageManager": "[email protected]",
  "jest": {
    "collectCoverage": true,
    "verbose": true,
    "collectCoverageFrom": ["src/**/{!(ignore-me),}.ts", "src/**/{!(ignore-me),}.tsx"],
    "coveragePathIgnorePatterns": [".*\\.d\\.ts"],
    "extensionsToTreatAsEsm": [".ts", ".tsx"],
    "moduleDirectories": ["node_modules", "__mocks__"],
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1",
      "^~api/(.*)$": "<rootDir>/src/api/$1",
      "^~utils/(.*)$": "<rootDir>/src/utils/$1",
      "^~services/(.*)$": "<rootDir>/src/services/$1",
      "^~models/(.*)$": "<rootDir>/src/models/$1",
      "^~atoms$": "<rootDir>/src/atoms",
      "^~atoms/(.*)$": "<rootDir>/src/atoms/$1",
      "^~components/(.*)$": "<rootDir>/src/components/$1",
      "^~components$": "<rootDir>/src/components",
      "^~hooks/(.*)$": "<rootDir>/src/hooks/$1",
      "^tamagui.config$": "<rootDir>/tamagui.config.ts"
    },
    "preset": "jest-expo",
    "setupFiles": ["<rootDir>/node_modules/react-native/jest/setup.js", "<rootDir>/__test__/setupJest.ts"],
    "setupFilesAfterEnv": ["<rootDir>/__test__/setupJest.ts", "<rootDir>/node_modules/@testing-library/jest-native/extend-expect"],
    "testEnvironment": "react-native",
    "testMatch": [
      "<rootDir>/__test__/**/*.test.tsx",
      "<rootDir>/__test__/**/*.test.ts"
    ],
    "testTimeout": 20000,
    "transform": {
      "^.+\\.(js|jsx|ts|tsx|mjs)$": "babel-jest"
    },
    "globals": {
      "__DEV__": true
    }
  }
}

my babel.config.js

process.env.TAMAGUI_TARGET = 'native';

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'expo-router/babel',
      '@babel/plugin-proposal-export-namespace-from',
      '@babel/transform-react-jsx-source',
      [
        'transform-inline-environment-variables',
        {
          include: 'TAMAGUI_TARGET',
        },
      ],
      [
        '@tamagui/babel-plugin',
        {
          components: ['tamagui'],
          config: './tamagui.config.ts',
          logTimings: true,
        },
      ],
      'react-native-reanimated/plugin'
    ]
  };
};

my tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "~*": [
        "src/*"
      ],
      "assets/*": [
        "assets/*"
      ],
      "tamagui.config": [
        "tamagui.config.ts"
      ],
      "types/*": [
        "types/*"
      ]
    },
    "strict": true,
    "module": "ESNext",
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
  ],
  "exclude": ["node_modules", "babel.config.js"]
}

when run test with bun getting following error

Test suite failed to run

ReferenceError: __DEV__ is not defined

  at Object.<anonymous> (node_modules/react-native/index.js:261:1)
  at Module._compile (node_modules/pirates/lib/index.js:117:24)
  at Object.newLoader (node_modules/pirates/lib/index.js:121:7)
  at ScriptTransformer.requireAndTranspileModule (node_modules/@jest/transform/build/ScriptTransformer.js:798:66)

I have simple test test/containers/EditProfile/AddressForm.test.tsx

import { render, screen } from '@testing-library/react-native';
import { AddressForm } from '../../../src/containers/EditProfile/AddressForm';

const mockUser = {
  first_name: 'Alice',
  last_name: 'Wonderland',
};

describe('AddressForm test', () => {
  it('render component', async () => {
    render(
      <AddressForm
        header="Test Header"
        userObj={mockUser}
        setAddress1={jest.fn()}
        setCity={jest.fn()}
        setState={jest.fn()}
        setZip={jest.fn()}
        addressFormErrors={{}}
      />,
    );

    await screen.findByText('Test Header');
    screen.debug();
  });
});

No sure why it can't just run test without analyzing whole project...?

0

There are 0 answers