[Bug?]: when webAuthn enabled, tests can not be run

[aivarsak]

What's not working?

all render tests fail with

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:266
    export { browserSupportsWebAuthn, browserSupportsWebAuthnAutofill, platformAuthenticatorIsAvailable, startAuthentication, startRegistration };
    ^^^^^^

    SyntaxError: Unexpected token 'export'

      1 | import { createDbAuthClient, createAuth } from '@redwoodjs/auth-dbauth-web'
    > 2 | import WebAuthnClient from '@redwoodjs/auth-dbauth-web/webAuthn'
        | ^
      3 |
      4 | const dbAuthClient = createDbAuthClient({ webAuthn: new WebAuthnClient() })
      5 |

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1495:14)
      at Object.<anonymous> (node_modules/@redwoodjs/auth-dbauth-web/dist/webAuthn.js:10:16)
      at Object.<anonymous> (node_modules/@redwoodjs/auth-dbauth-web/webAuthn/index.js:2:18)
      at Object.require (web/src/auth.ts:2:1)

How do we reproduce the bug?

Create new app ( v4.4.3 or canary) yarn create redwood-app --ts ./redwood-app

Add at least one page yarn redwood generate page home /

Setup dbAuth with enabled WebAuthn. You will be prompted to ask if you want to enable WebAuthn support yarn rw setup auth dbAuth

run tests yarn rw test

observe the error

What's your environment? (If it applies)

System:
    OS: macOS 13.2.1
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.0 - /private/var/folders/4w/cqld2xrd1gz1hkdsqx86knjc0000gn/T/xfs-9524dee8/node
    Yarn: 3.5.0 - /private/var/folders/4w/cqld2xrd1gz1hkdsqx86knjc0000gn/T/xfs-9524dee8/yarn
  Databases:
    SQLite: 3.39.5 - /usr/bin/sqlite3
  Browsers:
    Chrome: 111.0.5563.146
    Firefox: 106.0.5
    Safari: 16.3
  npmPackages:
    @redwoodjs/auth-dbauth-setup: 4.4.3 => 4.4.3
    @redwoodjs/core: 4.4.3 => 4.4.3

Are you interested in working on this?

• [ ] I'm interested in working on this

[aivarsak]

The workaround I use:

Modify web/src/auth.ts to

let dbAuthClient
if (process.env.NODE_ENV === 'test') {
  dbAuthClient = createDbAuthClient()
} else {
  const WebAuthnClient = require('@redwoodjs/auth-dbauth-web/webAuthn').default
  dbAuthClient = createDbAuthClient({ webAuthn: new WebAuthnClient() })
}

[thedavidprice]

Thanks @aivarsak

Thoughts on next steps here (if any) @cannikin?

[cannikin]

Hmm, is this one of those annoying ES6 issues? I think @dac09 has an issue somewhere to get us to support ES6 modules natively, and then this should be taken care of. If we didn't have a fix on the horizon I would say we could modify the auth.js template to include @aivarsak 's workaround. But, if we do plan on fixing it soon, maybe add just add the workaround to the Webauthn docs? You pretty much have to read those to get Webauthn working, so if anyone enables it they're probably going to see the notice (we'll put it in a big yellow WARNING box).

[chuckcarpenter]

The bit from @aivarsak works for that package, but if you have any other ESM imports you'll need to add them as transformIgnorePatterns to the web jest.config.js. e.g.,

transformIgnorePatterns: [
    '/node_modules/(?!(my-esm-thingy)/)',
  ],