Jest encountered an unexpected token

[truongnmt]

I'm writing a test using Jest and I encountered below error. Seem that Jest cannot parse webauthn-json.

 FAIL  front/shared/pages/credentialSettings/credentialSettings.spec.tsx
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    ~/node_modules/@github/webauthn-json/dist/main/webauthn-json.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){function e(e){const t="==".slice(0,(4-e.length%4)%4),n=e.replace(/-/g,"+").replace(/_/g,"/")+t,r=atob(n),o=new ArrayBuffer(r.length),c=new Uint8Array(o);for(let e=0;e<r.length;e++)c[e]=r.charCodeAt(e);return o}function t(e){const t=new Uint8Array(e);let n="";for(const e of t)n+=String.fromCharCode(e);return btoa(n).replace(/\+/g,"-").replace(/\//g,"_").replace(/=/g,"")}function n(e,t,r){if("copy"===t)return r;if("convert"===t)return e(r);if(t instanceof Array)return r.map((r=>n(e,t[0],r)));if(t instanceof Object){const o={};for(const[c,i]of Object.entries(t))if(c in r)null!=r[c]?o[c]=n(e,i.schema,r[c]):o[c]=null;else if(i.required)throw new Error("Missing key: "+c);return o}}function r(e){return{required:!0,schema:e}}function o(e){return{required:!1,schema:e}}const c={type:r("copy"),id:r("convert")

    SyntaxError: Unexpected token export

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (front/shared/pages/credentialSettings/CredentialUtils.tsx:729:25)

Here is my jest.config.js:

module.exports = {
  verbose: true,
  preset: 'jest-puppeteer',
  transformIgnorePatterns: ['<rootDir>/node_modules/'],
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
    '^.+\\.(js|jsx)$': 'babel-jest',
    '^.+\\.svg$': '<rootDir>/svgTransform.js',
  },
  setupFilesAfterEnv: ['<rootDir>/front/test/setupTests.js'],
  testMatch: ['<rootDir>/front/**/?(*.)+(spec).ts?(x)'],
  moduleNameMapper: {
    '.+\\.(png|jpg|ttf|woff|woff2)$': 'identity-obj-proxy',
    '.+\\.(css|styl|less|sass|scss)$': '<rootDir>/front/test/styleMock.js',
  },
  reporters: ['default', 'jest-junit'],
  testEnvironment: 'jsdom',
};

Here is my config for babel:

{
  "env": {
    "test": {
      "plugins": [
        "transform-es2015-modules-commonjs"
      ]
    }
  }
}

I'm using Jest 24.9.0, webauthn-json version 0.5.7, my setup is React as frontend with Jest for frontend test and Rails as backend.

This could be an issue with Jest, sorry if I ask in wrong place 🙏 🙏 🙏 Just want to see that if any one has any idea with my setup.

[truongnmt]

Solved by setting webauthn-json to be transform and explicitly set transform options ts-jest for webauthn-json.js:

  ...
  transformIgnorePatterns: ['/node_modules/(?!@github)'],
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
    '^.+\\webauthn-json.js$': 'ts-jest',
    '^.+\\.(js|jsx)$': 'babel-jest',
    '^.+\\.svg$': '<rootDir>/svgTransform.js',
  },
  ...

Haven't figure out why babel-jest failed to compile though.