3

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 !

2 Answers 2

1

You should add a transformIgnorePatterns to the jest config:

 "transformIgnorePatterns": [
        "node_modules/(?!(@react-native|react-native|react-native-vector-icons))"
      ] 
Sign up to request clarification or add additional context in comments.

Comments

0

A bit too late but if anyone has this issue. If you are using expo, just change

'preset': 'react-native'

to

 'preset': 'jest-expo'

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.