Jest-Native“SyntaxError：无法在模块外使用导入语句”

Question

Trying to do some unit testing using https://github.com/callstack/react-native-testing-library + https://github.com/testing-library/jest-native , I have no problem testing plain javascript files, but I encounter the following error when testing on components:

 ● Test suite failed to run

    Jest encountered an unexpected token

    Details:

    C:\Users\admin\Documents\my_project\node_modules\@expo\vector-icons\FontAwesome5.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import FontAwesome5 from './build/FontAwesome5';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import React from 'react'
      2 | import View from 'react-native'
    > 3 | import FontAwesome5 from "react-native-vector-icons/FontAwesome5"
        | ^

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (src/components/file1.js:3:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.853 s, estimated 2 s
Ran all test suites.

package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/material-bottom-tabs": "^5.3.14",
    "@react-navigation/native": "^5.9.3",
    "@react-navigation/stack": "^5.14.3",
    "expo": "~40.0.0",
    "expo-linear-gradient": "^8.4.0",
    "expo-status-bar": "~1.0.3",
    "galio-framework": "^0.8.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-appearance": "~0.3.3",
    "react-native-bouncy-checkbox": "^2.0.0",
    "react-native-drop-shadow": "^0.0.2",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-modal": "^11.7.0",
    "react-native-paper": "^4.7.2",
    "react-native-progress-bar-animated": "^1.0.6",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-vector-icons": "^8.1.0",
    "react-native-web": "~0.13.12",
    "react-navigation-stack": "^2.10.4",
    "remove-accents": "^0.4.2",
    "tslib": "^2.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.13.12",
    "@babel/preset-react": "^7.13.13",
    "@testing-library/jest-native": "^4.0.1",
    "@testing-library/react-native": "^7.2.0",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "babel-jest": "^26.6.3",
    "jest": "^26.6.3",
    "react-test-renderer": "^16.14.0",
    "ts-jest": "^26.5.4",
    "typescript": "~4.0.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "private": true
}

babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets:
      ['babel-preset-expo'],
  };
};

jest.config.js:

module.exports = {
    preset: 'react-native',
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
    transformIgnorePatterns: [
        "node_modules/(?!(react-native"
        + "|react-native-vector-icons/FontAwesome5"
        + ")/)",
    ],
}

How can I fix this? Thanks for you help !

Answer 1

You should add a transformIgnorePatterns to the jest config:

 "transformIgnorePatterns": [
        "node_modules/(?!(@react-native|react-native|react-native-vector-icons))"
      ]