Help! - Full ESM Support 🆘

[GrantBirki]

Full ESM Support

This issue is a call for help from any and all JavaScript wizards.

I have given it my best go (about ~4 times now) to allow for supporting ESM + Jest tests with this project. I have been unsuccessful and I think I'm in over my head with JavaScript so I could use a hand from someone who is deeply familiar with JS + ESM + Jest.

Why?

This project relies on a few Octokit packages:

• octokit/plugin-retry.js
• octokit/plugin-paginate-graphql.js (soon)

There is a shift in the open source community to have JS projects be full ESM. Recently the octokit/plugin-retry.js moved to full ESM in v7.0.0. This is a breaking change and in order to adopt their latest versions, this project needs to have ESM modules not explode when running npm test with Jest.

The issue

The issue could have multiple layers and I will struggle to even explain it due to my lack of understanding with JavaScript + ESM + Jest (I use Ruby for most projects here at GitHub and this one is an exception because... Actions).

The issue begins when you install a pure ESM package. Here is an example of a package that this Action would like to use in the future:

$ npm i @octokit/plugin-paginate-graphql --save

added 23 packages, removed 7 packages, changed 7 packages, and audited 540 packages in 4s

50 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Now that the package is installed, try to run the test suite:

$ npm test

> test
> (BRANCH_DEPLOY_JEST_TEST=true jest && make-coverage-badge --output-path ./badges/coverage.svg) || make-coverage-badge --output-path ./badges/coverage.svg

 PASS  __tests__/functions/time-diff.test.js
 PASS  __tests__/functions/react-emote.test.js
 PASS  __tests__/functions/check-input.test.js
 PASS  __tests__/functions/deployment.test.js
 PASS  __tests__/functions/string-to-array.test.js
 PASS  __tests__/functions/valid-branch-name.test.js
 PASS  __tests__/functions/label.test.js
 PASS  __tests__/functions/trigger-check.test.js
 PASS  __tests__/functions/valid-permissions.test.js
 PASS  __tests__/functions/truncate-comment-body.test.js
 PASS  __tests__/functions/actions-status.test.js
 PASS  __tests__/functions/valid-deployment-order.test.js
 PASS  __tests__/functions/unlock.test.js
 PASS  __tests__/functions/unlock-on-merge.test.js
 FAIL  __tests__/main.test.js
  ● 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:

    /Users/<user>/code/branch-deploy/node_modules/@octokit/core/dist-src/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { getUserAgent } from "universal-user-agent";
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      2 | import * as github from '@actions/github'
      3 | import {context} from '@actions/github'
    > 4 | import {octokitRetry} from '@octokit/plugin-retry'
        | ^
      5 | import dedent from 'dedent-js'
      6 |
      7 | import {triggerCheck} from './functions/trigger-check'

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
      at Object.<anonymous> (node_modules/@octokit/plugin-retry/dist-node/index.js:37:19)
      at Object.require (src/main.js:4:1)
      at Object.require (__tests__/main.test.js:1:1)
...
..
.

💥

I have tried many variants of the following:

• Altering Jest config to try and do some sort of module transformations (?)
• Adding a babel config to try and do more module transforms (?)
• Change the "type" -> "module" in the package.json file (makes sense)
• Followed this guide by Jest and used NODE_OPTIONS="$NODE_OPTIONS --experimental-vm-modules". This actually felt like it made progress for once but then later failed because the test suite "could not locate jest".
• I have also tried deleting, swapping packages, altering import statements, etc more times than I can count

[mockjv]

I'm facing a fairly similar issue with unit tests in an internal tool's unit tests, and I've been trying everything I can come up with as well to address this but have yet to find a particular resolution. Did you end up finding a way to address it on your end?

[GrantBirki]

@mockjv I have not had any success on this endeavor yet... 😢