Error when using vector-icons component in Jest test with Expo 25

[keith-kurak]

I just upgraded to Expo 25, and updated react-test-renderer to 16.2.0 to match the updated React version.

A while back when I first added tests for my components that included components from expo/vector-icons, there were the sorts of transform-related errors that I typically see with Jest tests, and I added the package to transformIgnorePatterns in the jest section in package.json and the errors went away:

"jest": {
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!react-native|@shoutem/theme|@shoutem/animation|@shoutem/ui|tcomb-form-native|native-base-shoutem-theme|react-navigation|@expo/react-native-action-sheet|expo|@expo/vector-icons)"
    ]
  },

(see the last match)

As of Expo 25, I now get another error related to the vector-icons library:

    /path/to/my/app/node_modules/@expo/vector-icons/fonts/Entypo.ttf:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){
                                                                                             
    
    SyntaxError: Invalid or unexpected token
      
      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)
      at Object.<anonymous> (node_modules/@expo/vector-icons/Entypo.js:4:55)
      at Object.get Entypo [as Entypo] (node_modules/@expo/vector-icons/index.js:3:8)

For good measure, I tried running jest with --no-cache, but got the same error. Given I've already got expo/vector-icons in my transformIgnorePatterns, I'm not real sure what to do with this, and wondering if anyone has any other ideas. Thanks!

---

Just to try to see what happens for comparison...

If I remove @expo/vector-icons from transformIgnorePatterns and run Jest with the --no-cache flag, I get (what I believe is) the original error that prompted me to add it in the first place:

/path/to/my/app/node_modules/@expo/vector-icons/Entypo.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import glyphMap from './vendor/react-native-vector-icons/glyphmaps/Entypo.json';
                                                                                             ^^^^^^
    
    SyntaxError: Unexpected token import

      74 | 
      75 | const PressOptionChevronIcon = () => (
    > 76 |   <Entypo name="chevron-thin-right" size={14} color={colors.secondaryText} />
      77 | );
      78 | 
      79 | export {
      
      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)
      at Object.get Entypo [as Entypo] (node_modules/@expo/vector-icons/index.js:3:12)
      at PressOptionChevronIcon (app/config/common-icons/index.js:76:43)
      at mountIndeterminateComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:3815:15)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4004:16)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6007:16)

[wli]

Also running into this exact error (but with FontAwesome). Environment is jest 22.1.4 with SDK25.

# relevant package.json sections

  "jest": {
    "preset": "jest-expo",
    "transformIgnorePatterns": [
    ],
    "cacheDirectory": "/tmp/jest",
    "coverageDirectory": "./coverage/",
    "collectCoverage": true,
    "collectCoverageFrom": [
      "**/*.js",
      "!**/node_modules/**",
      "!**/coverage/**",
      "!rn-cli.config.js",
      "!.eslintrc.js"
    ]
  },
  "dependencies": {
    "@expo/react-native-action-sheet": "^1.0.0",
    "@expo/react-native-responsive-image": "^1.0.0",
    "@expo/react-native-touchable-native-feedback-safe": "^1.1.2",
    "@expo/vector-icons": "^6.2.2",
    "@wli/react-native-modal-popover": "0.0.7",
    "apsl-react-native-button": "^3.1.0",
    "clamp": "^1.0.1",
    "eslint-config-exponent": "^5.1.3",
    "expo": "^25.0.0",
    "lodash": "^4.17.4",
    "md5": "^2.2.1",
    "moment": "^2.20.1",
    "prop-types": "^15.5.10",
    "react": "16.2.0",
    "react-mixin": "^4.0.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz",
    "react-native-autolink": "^1.3.1",
    "react-native-circular-progress": "^0.1.0",
    "react-native-keyboard-spacer": "^0.4.1",
    "react-native-mime-types": "^2.2.1",
    "react-navigation": "^1.0.0-beta.27",
    "react-redux": "^5.0.6",
    "react-timer-mixin": "^0.13.3",
    "redux": "^3.7.2",
    "redux-actions": "^2.2.1",
    "redux-thunk": "^2.2.0",
    "semver": "^5.5.0",
    "sentry-expo": " ~1.7.0",
    "throttle-debounce": "^1.0.1",
    "uuid": "^3.2.1"
  },
  "devDependencies": {
    "babel-eslint": "^8.0.3",
    "babel-jest": "^22.1.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "codecov": "^3.0.0",
    "eslint": "^4.13.1",
    "eslint-plugin-babel": "^4.1.2",
    "eslint-plugin-flowtype": "^2.40.1",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-react": "^7.5.1",
    "eslint-plugin-react-native": "^3.2.0",
    "eslint-plugin-unicorn": "^3.0.1",
    "jest": "22.1.4",
    "jest-expo": "^25.0.0",
    "react-test-renderer": "^16.2.0",
    "redux-mock-store": "^1.4.0",
    "remote-redux-devtools": "^0.5.12"
  },

jestjs/jest#5108 (comment) implies that maybe the expo/vector-icons repo needs a .babelrc file to work correctly. I forked the repo and tested (wli@b7c0c2b), but it didn't seem to work.

For reference, here's the full diff I did:

[wli]

@llamaluvr some combination of jest and jest-expo packages seems to have addressed this issue for me. Likely this commit in jest-expo: https://github.com/expo/jest-expo/commit/8b252538a39875458079a5c0b84482d08b8103f1

[keith-kurak]

@wli upgrading the jest-expo 25.1.0 fixed it. Thanks!

[slouderback]

@wli upgrading the jest-expo 25.1.0 fixed it. Thanks!

How did you do that?