Search code examples
reactjsjestjsopenlayersbabel-jest

Jest encountered an unexpected token with OpenLayers import

The Error

Error Soure

I read this error thoroughly and followed up on a number of posts, but the solutions don't seem to work for me. Here is what I've read the potential cause is:

  1. https://github.com/openlayers/openlayers/issues/7401

I've tried to update my Jest configuration in my package.json as well installed jest-canvas-mock, but still encounter this error. Here are the changes I've made:

"transformIgnorePatterns": [
  "<rootDir>/node_modules/(?!(ol)/)"
],
"setupFiles": [
  "jest-canvas-mock"
],

Any help on this matter would be greatly appreciated.

Solution

  • After a deep dive I was able to come across the core issue in detail here:

    https://github.com/facebook/jest/issues/6229#issuecomment-551916758

    This issue is still relevant, so for posterity sake I'll provide the technique I discovered for applying the band-aid:

    1. Rename your .babelrc to babel.config.js (Note that you have to use module.exports)

    2. Apply the desired transformIgnorePattern:

      "transformIgnorePatterns": [ "/node_modules/(?!ol).+\.js$"
      ],

    If this doesn't work you the link above should guide you towards a solution.