Babel transform only *.mjs files for Jest

[colinrotherham]

Quick spike to solve to blockers in #3812

1. Puppeteer needs to keep dynamic import() to load in a browser
2. Jest needs to replace dynamic import() with require() for virtual machine contexts

By running Babel only on *.mjs ES modules we can use dynamic import() in *.js CommonJS

Update: Gave it a couple of runs on Windows to confirm it works:

• https://github.com/alphagov/govuk-frontend/actions/runs/5379997972
• https://github.com/alphagov/govuk-frontend/actions/runs/5380112102

[romaricpascal]

I like that, that sounds a very “working with how Node works” way to sort ourselves out 🙌🏻 Two little questions:

1. Is it worth linting for it, or would Jest fail with enough clarity that we'd know that it's because it transpiled an import to require that our tests failed
2. Do del and slash need to be treated specially because they're dependencies with "type":"module" in their package? Would there be other situation we'd want to transpile .js files (for ex. some we do author)?

[colinrotherham]

Thanks @romaricpascal

Using ESLint

1. Is it worth linting for it, or would Jest fail with enough clarity that we'd know that it's because it transpiled an import to require that our tests failed

Yeah we could add ESLint rules but you can't identify Puppeteer tests by filename

Puppeteer tests with import() in *.mjs would fail with missing Babel helpers

ReferenceError: _interopRequireWildcard is not defined
pptr:evaluate;Object.%3Canonymous%3E%20(%2FUsers%2Fcolin%2FSites%2FGDS%2Fgovuk-frontend%2Fpackages%2Fgovuk-frontend%2Fsrc%2Fgovuk%2Fcomponents%2Fglobals.test.mjs%3A13%3A29):1:61

Other tests with import() in *.js would fail with Jest runtime syntax errors

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.

ESM-only packages

2. Do del and slash need to be treated specially because they're dependencies with "type":"module" in their package?

Babel doesn't transpile code in node_modules by default so we:

1. Update transformIgnorePatterns to allow paths to del and slash
2. Update transform to transpile the full *.js path to del and slash

Yeah they use "type":"module" so their *.js paths would be skipped if we only transpile *.mjs

Would there be other situation we'd want to transpile .js files (for ex. some we do author)?

Simplest way to opt in to Babel transpiling would be to use the *.mjs extension still

[colinrotherham]

There are also Jest environments that avoid Node.js VM contexts like:

• https://github.com/nicolo-ribaudo/jest-light-runner#readme

[romaricpascal]

Looking good! 🙌🏻 There's a reference to globals.test.mjs in testing-and-linting.md which could use updating as part of 84f3263. And I think it'd be worth highlighting the reason for picking a .js file over a .mjs (.mjs by default, unless you need to do a dynamic import() in the file, is that it?). Would you mind adding that, please?

[romaricpascal]

question Does that affect the coverage of the tests that do run through Babel? I think what I'm worried about is the Babel helpers being considered for the coverage if it is collected via v8, but excluded with default setting. I wouldn't block the PR as we're not looking much at coverage at the moment, but it'll be something to dig into if/when we get to #3101 😊

[colinrotherham]

Yeah a little bit

Coverage from coverageProvider: 'v8' is generated from transpiled code but it's mapped back to the original source using source maps and will exclude sneaky helpers. Read about when it launched in Jest v25

I'm sure we'll see minor differences in coverage percentages. Turning off Babel transforms for *.js stops babel-plugin-istanbul from instrumenting the code so it's better than losing it entirely?

[romaricpascal]

The situation doesn't sound too bad if the v8 thing takes sourcemaps into account. Like I said, not a blocker, just wanted to understand a bit and flag for #3101 😊

[colinrotherham]

Looking good! 🙌🏻

Thanks @romaricpascal

There's a reference to globals.test.mjs in testing-and-linting.md which could use updating as part of 84f3263.

✅ Done

And I think it'd be worth highlighting the reason for picking a .js file over a .mjs (.mjs by default, unless you need to do a dynamic import() in the file, is that it?). Would you mind adding that, please?

✅ Done

I've gone with the text below as it's only dynamic import() in browsers (e.g. Puppeteer) that we need to call natively without Babel transforms. All other tests using dynamic import() have been reverted and work great still

Tests should be written using ES modules (*.mjs) by default, but use CommonJS modules (*.js) for tests using browser import() in Puppeteer. This avoids Babel transforms until Jest supports import() and ES modules in future.

[romaricpascal]

Neat! Thanks for updating the docs 🥳 ⛵