Untranspiled ES6 module exports in v0.30 cause Jest tests to fail

[richardwestenra]

Problem

The refactoring in the v0.3.0 release from CommonJS exports to ES module exports causes syntax errors in environments that do not support ES6 syntax. I observed this when my tests began failing in an automated Snyk PR to update the version of this package.

Steps to reproduce

I managed to replicate this in a brand new, boilerplate Create-React-App instance. I chose CRA because it's very popular and includes modern tooling properly configured (e.g. Babel, Webpack, etc), so is a good example of a common use-case. If a library doesn't work when imported into CRA then it's probably a problem with the library, not the app.

I created the new app and installed the package

$ npx create-react-app test-konami-code
$ npm install konami-code

Then I copy-pasted the code from the readme exactly as is, then ran a test:

$ npm test

which produced the following error:

 FAIL  src/App.test.js
  ● 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/konami-code/KonamiCode.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export default class KonamiCode {
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

    > 5 | import KonamiCode from "konami-code";
        | ^
      6 | 
      7 | const konami = new KonamiCode();

Recommendation

I recommend using babel to transpile the source code into CommonJS modules before export (maybe in a gitignored /dist directory), then pointing the package.json main prop at that directory, and setting "files": ["dist"] in package.json so that it's picked up in the exported npm package only. I've done this in my own packages, based on recommendations that I've read ([source 1], [source 2]), and it works well for me. Something like this:

// package.json
"main": "dist/KonamiCode.js",
"files": [
  "dist"
],
"scripts": {
  "prepublishOnly": "babel KonamiCode.js --out-dir dist/KonamiCode.js",
}

Many thanks!