Login/Register
Cannot find module '@babel/runtime/helpers/interopRequireDefault' from 'node_modules/react-native/jest/setup.js' when I run tests
Asked Answered
javascripttypescriptreact-nativejestjsts-jest
C

5

18

I'm trying to build a mobile application with typescript, react-native, expo and jest. When I'm trying to run tests:

 FAIL  src/components/Button/tests/Button.test.tsx
  ● Test suite failed to run

    Cannot find module '@babel/runtime/helpers/interopRequireDefault' from 'node_modules/react-native/jest/setup.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)
      at Object.<anonymous> (node_modules/react-native/jest/setup.js:407:30)

tsconfig.json

{
    "extends": "expo/tsconfig.base",
    "include": ["./src/**/*.ts", "./src/**/*.tsx"],
    "exclude": [
        "node_modules",
        "**/*.spec.ts",
        "**/*.test.ts",
        "**/*.spec.tsx",
        "**/*.test.tsx",
        "jest.config.ts",
        "babel.config.js",
        "metro.config.js",
        "stryker.conf.json"
    ],
    "compilerOptions": {
        "noEmit": true,
        "pretty": true,
        "strict": true,
        "allowJs": true,
        "sourceMap": true,
        "baseUrl": "./src",
        "module": "es2022",
        "target": "ES2021",
        "declaration": true,
        "skipLibCheck": true,
        "jsx": "react-native",
        "esModuleInterop": true,
        "isolatedModules": true,
        "noImplicitReturns": true,
        "resolveJsonModule": true,
        "types": ["jest", "node"],
        "moduleResolution": "node",
        "allowUnusedLabels": false,
        "allowUnreachableCode": false,
        "noFallthroughCasesInSwitch": true,
        "lib": ["ES2021", "ESNext", "DOM"],
        "allowSyntheticDefaultImports": true,
        "forceConsistentCasingInFileNames": true,
        "typeRoots": ["./types", "./node_modules/@types"]
    }
}

jest.config.ts

import { defaults } from 'ts-jest/presets';

export default {
    ...defaults,
    clearMocks: true,
    maxWorkers: '50%',
    collectCoverage: true,
    coverageProvider: 'v8',
    preset: 'react-native',
    testEnvironment: 'node',
    cacheDirectory: '.jest/cache',
    coverageDirectory: '.jest/coverage',
    moduleDirectories: ['<rootDir>/src'],
    testPathIgnorePatterns: ['<rootDir>/node_modules/'],
    coveragePathIgnorePatterns: ['<rootDir>/node_modules/'],
    globals: {
        'ts-jest': {
            tsconfig: 'tsconfig.json'
        }
    }
};

babel.config.js

module.exports = function (api) {
    api.cache(true);

    return {
        presets: ['babel-preset-expo', 'module:metro-react-native-babel-preset'],
        plugins: [
            [
                'module-resolver',
                {
                    root: ['./src'],
                    extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json']
                }
            ],
            [
                'module:react-native-dotenv',
                {
                    safe: false,
                    path: '.env',
                    verbose: false,
                    moduleName: '@env',
                    envName: 'NODE_ENV',
                    allowUndefined: false
                }
            ]
        ],
        env: {
            production: {
                plugins: ['react-native-paper/babel', 'transform-remove-console']
            }
        }
    };
};

package.json

{
    "name": "radar-solidario",
    "private": true,
    "version": "1.0.0",
    "main": "node_modules/expo/AppEntry.js",
    "scripts": {
        "eject": "expo eject",
        "start": "expo start",
        "test": "jest --no-cache",
        "prepare": "husky install",
        "format": "prettier --write .",
        "check-format": "prettier --check .",
        "check-types": "tsc --pretty --noEmit",
        "check-lint": "eslint src --ext ts --ext tsx --ext js --ext jsx",
        "android": "NODE_ENV=development expo start --android",
        "android:prod": "NODE_ENV=production expo start --android",
        "android:build": "NODE_ENV=production expo build:android -t apk",
        "ios": "NODE_ENV=development expo start --ios",
        "ios:prod": "NODE_ENV=production expo start --ios",
        "ios:build": "NODE_ENV=production expo build:ios -t simulator"
    },
    "dependencies": {
        "@expo/vector-icons": "^12.0.5",
        "@hookform/resolvers": "^2.8.5",
        "@react-native-async-storage/async-storage": "^1.15.14",
        "@react-native-community/datetimepicker": "4.0.0",
        "@react-native-community/netinfo": "7.1.3",
        "@react-native-picker/picker": "^2.2.1",
        "@react-navigation/bottom-tabs": "^6.0.9",
        "@react-navigation/native": "^6.0.6",
        "@react-navigation/stack": "^6.0.11",
        "@reduxjs/toolkit": "^1.7.1",
        "axios": "^0.24.0",
        "expo": "^44.0.3",
        "expo-asset": "~8.4.5",
        "expo-cli": "^5.0.3",
        "expo-community-flipper": "^44.0.0",
        "expo-font": "^10.0.4",
        "expo-splash-screen": "~0.14.1",
        "expo-status-bar": "~1.2.0",
        "i18next": "^21.6.5",
        "jwt-decode": "^3.1.2",
        "lottie-react-native": "^5.0.1",
        "metro-react-native-babel-preset": "^0.66.2",
        "moment": "^2.29.1",
        "react": "17.0.2",
        "react-dom": "17.0.2",
        "react-hook-form": "^7.22.5",
        "react-i18next": "^11.15.3",
        "react-native": "https://github.com/expo/react-native/archive/sdk-44.0.0.tar.gz",
        "react-native-countdown-circle-timer": "^2.5.4",
        "react-native-dotenv": "^3.3.1",
        "react-native-flipper": "^0.127.0",
        "react-native-gesture-handler": "^2.1.0",
        "react-native-maps": "0.29.4",
        "react-native-paper": "^4.11.1",
        "react-native-safe-area-context": "3.3.2",
        "react-native-screens": "~3.10.1",
        "react-native-svg": "^12.1.1",
        "react-native-web": "^0.17.5",
        "react-redux": "^7.2.6",
        "react-thunk": "^1.0.0",
        "redux-persist": "^6.0.0",
        "win-node-env": "^0.6.0",
        "yup": "^0.32.11"
    },
    "devDependencies": {
        "@babel/core": "^7.12.9",
        "@babel/runtime": "^7.16.7",
        "@stryker-mutator/core": "^5.5.1",
        "@stryker-mutator/jest-runner": "^5.5.1",
        "@stryker-mutator/typescript-checker": "^5.5.1",
        "@testing-library/jest-dom": "^5.16.1",
        "@testing-library/react": "^12.1.2",
        "@testing-library/user-event": "^13.5.0",
        "@types/jest": "^27.4.0",
        "@types/node": "^17.0.8",
        "@types/react": "~17.0.21",
        "@types/react-native": "~0.66.10",
        "@types/react-native-dotenv": "^0.2.0",
        "@typescript-eslint/eslint-plugin": "^5.7.0",
        "@typescript-eslint/parser": "^5.7.0",
        "babel-plugin-module-resolver": "^4.1.0",
        "babel-preset-expo": "^9.0.2",
        "eslint": "^8.4.1",
        "eslint-plugin-react": "^7.27.1",
        "husky": "^7.0.0",
        "jest": "^27.4.7",
        "msw": "^0.36.3",
        "prettier": "^2.5.1",
        "ts-jest": "^27.1.2",
        "typescript": "~4.5.4"
    },
    "resolutions": {
        "react-native/@jest/create-cache-key-function": "^27.4.2"
    },
    "husky": {
        "hooks": {
            "pre-commit": "yarn lint",
            "pre-push": ""
        }
    }
}

Things what I tried

  • Remove or add @babel/runtime
  • Change the node_modules/jest-haste-map/build/index.js watchman use
  • Use the expo-jest
  • Use the ES2015 in tsconfig.json
  • Use the babel-jest for transform in jest.config.ts
  • Remove the jest.config.ts file
Cockup answered 7/1, 2022 at 14:26 Comment(3)
I you are using a text editor/ide like vscode or visual studio code. Try closing and reopening the project again – Amygdaloid
I tried, but it doesn't works. – Cockup
It seems the answer provided by me is meeting acceptance - would you mind accepting it as a solution? – Ephialtes
E
12

Try running npm run test --clearCache as adviced here.

It did the job for me.

Ephialtes answered 3/4, 2022 at 8:30 Comment(0)
N
2

As the response suggest, the module babel-runtime is missing and so you need to install it. use the command below.

npm i babel-runtime
Ned answered 30/1, 2023 at 14:5 Comment(0)
C
1

After a lot of time, the solve is basically use jest-expo preset and remove the moduleDirectories:

jest.config.json

{
    "clearMocks": true,
    "maxWorkers": "50%",
    "preset": "jest-expo",
    "collectCoverage": true,
    "coverageProvider": "v8",
    "testEnvironment": "node",
    "cacheDirectory": ".jest/cache",
    "coverageDirectory": ".jest/coverage",
    "moduleFileExtensions": ["ts", "tsx", "js"],
    "moduleDirectories": ["node_modules", "src"],
    "testPathIgnorePatterns": ["<rootDir>/node_modules/"]
}
Cockup answered 11/1, 2022 at 21:10 Comment(0)
P
1

what helped me was npm i babel-preset-react-app

Persimmon answered 21/4, 2022 at 14:14 Comment(0)
D
1

if none of the above works for you, try npx jest --clearCache and npm i again. Worked for me.

Dustidustie answered 27/10, 2022 at 15:38 Comment(1)
or npm update again – Dustidustie

© 2022 - 2024 — McMap. All rights reserved.