Jest - SyntaxError: Unexpected token 'export

[EdouardPauw]

Hello,

I have implemented webAuthn on my current login page thanks to your library.

But now when I'm running the already existing test this error is displayed :

Test suite failed to run
Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

By default "node_modules" folder is ignored by transformers.

Here's what you can do:
 • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
 • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
 • 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/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation

Details:

[...]/node_modules/@simplewebauthn/browser/dist/bundle/index.js:291
export { browserSupportsWebAuthn, browserSupportsWebAuthnAutofill, platformAuthenticatorIsAvailable, startAuthentication, startRegistration };
^^^^^^

SyntaxError: Unexpected token 'export'

  1 | import { Button, FormHelperText, InputAdornment, Snackbar, TextField, useMediaQuery } from '@material-ui/core';
  2 | import Alert from '@material-ui/lab/Alert';
> 3 | import { browserSupportsWebAuthn, browserSupportsWebAuthnAutofill, startAuthentication } from '@simplewebauthn/browser';

I spent a lot of time trying to resolving this error with no success ...
I already tried :

• Switch to ESM #136 (comment)
• transformIgnorePatterns option from jest

I think my main issue is that I do not really understand why this error happen.

[MasterKale]

Hello @EdouardPauw, sorry for the late reply. For that particular problem, it's related to the fact that Node historically only supported CommonJS modules, but EcmaScript modules (a.k.a. "ESM") is a newer syntax for importing packages that leverages a different module loading scheme. There are more comprehensive guides on the differences between the two, suffice to say that, before Node 14, something had to convert the imports between the two. TypeScript typically handles this if your codebase gets transpiled by it before any code is sent to Node, but if you're using SimpleWebAuthn in a JavaScript codebase then you'll likely need to leverage some capability hopefully in Jest to handle this conversion.

Have you had a chance to try the potential solution at https://jestjs.io/docs/ecmascript-modules that's mentioned in the error message?

[EdouardPauw]

Hello @MasterKalen, thank you for your answer. I did not have time to work on it the last days but I finaly found the solution today!
My mistake was to use transformIgnorePatterns but only transform tsx files.
My jest configuration was :

...
  transform: {
    '^.+\\.tsx?$': 'babel-jest',
  },
  transformIgnorePatterns: ['/node_modules/(?!(@simplewebauthn)/)'],

The solution I found is :

...
  transform: {
    '^.+\\.js$': 'ts-jest',
    '^.+\\.tsx?$': 'babel-jest',
  },
  transformIgnorePatterns: ['/node_modules/(?!(@simplewebauthn)/)'],

Thanks a lot for your time ! :)

[MasterKale]

I'm glad to hear you got it working correctly. Perhaps I should start documenting these framework-specific fixes... 🤔