jest transform support

[kenotron]

I'm collecting some esm + jest + react + enzyme "real world" issues as I'm going here:
https://github.com/kenotron/esm-jest/

1. On

   esm/esm.js

   Line 178 in 33ee0ac

   _runResult.next()

   , _runResult can be undefined it seems, so add a conditional there will help
2. A package like domutils that is used by jsdom & htmlparser2 will do silly things like this:
   https://github.com/fb55/domutils/blob/master/index.js where they loop through all the object keys and start calling ".bind" because they didn't expect something else to inject properties into the object (could be a jest + domutils goober? not necessarily esm??)

Anyway, it's almost there with jest as far as I can tell! If I just hack-patch this stuff conditional around the problematic code, jest works with esm!

[jdalton]

What we shipped in v3.1.0 is the beginnings of support.

You can use esm as a Jest transform with --no-cache to run simple ESM test files. I need to abstract our Jest wiring into a hook to allow it to tap more cleanly into the exposed transform method of process() and getCacheKey().

[jdalton]

Thanks for the interest y'all!
I'll be sure to update this issue when support 🚢

[dandv]

Does the v12 release make this work any easier? What would be the recommended way to use Jest with ESM now?

[chungchi300]

Any updates?

[jdalton]

@dandv

Does the v12 release make this work any easier?

It does not unfortunately.

@dandv @chungchi300

What would be the recommended way to use Jest with ESM now?

Continuing to use Babel is the way at the moment until I can get to making esm work.

[onigoetz]

If that's any help here's how I made it work in the build tool I maintain for work.

I created a small transformer which has only the job of converting import/export, and tries to do so only if needed :
https://github.com/swissquote/crafty/blob/master/packages/crafty-preset-jest/src/esm-transformer.js

Which is then added as a jest transform (https://github.com/swissquote/crafty/blob/master/packages/crafty-preset-jest/src/index.js#L50)
So I guess you could use that in your own projects by installing:

yarn add @swissquote/crafty-preset-jest

And adding this to your Jest configuration:

{
    "transformIgnorePatterns": [],
    "transform": {
        "[/\\\\]node_modules[/\\\\].+\\.m?js$": "@swissquote/crafty-preset-jest/src/esm-transformer"
    }
}

[damianobarbati]

@jdalton is the following statement still valid?

You can use esm as a Jest transform with --no-cache to run simple ESM test files. I need to abstract our Jest wiring into a hook to allow it to tap more cleanly into the exposed transform method of process() and getCacheKey().

I'm trying to run a simple spec with:

npx -n '-r esm' jest func.spec.js

and transforms: {} in my package.json jest section but the:

    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import func from './func.js';
                                                                                                    ^^^^
    SyntaxError: Unexpected identifier

is still afflicting me xD

[topheman]

I tried to use esm with jest as a loader. I had the following problems, maybe it will help for the next steps.

You can find a minimal reproducible case on that repo.

1. Due to the following error:

TypeError: Jest: a transform must export a `process` function.

I had to downgrade from [email protected] to [email protected].

2. Then I encountered the following error:

    TypeError: Cannot read property 'next' of undefined

      at Object.n.(anonymous function) (node_modules/esm/esm.js:1:1796)

Which might be due to the fact that might be due to the fact that the src/common.js file is being imported:

• directly in one of the tests
• indirectly by the components I'm testing in the 2 other tests

Those are basic tests (add, sub, concat), only for example. See topheman/jest-esm-experiments

It is fixable if I use babel-jest as a loader (which I did on the original project where I spotted the bug)

[machineghost]

A salute to the brave people in this thread. It's amazing/unfortunate that this giant thread (with associated repositories and whatnot) exists, and yet using the amazing esm module with Mocha is trivial.

I just don't understand why the Jest people won't simply add a --require arg ... but since they won't, personally I'm going back to Mocha.

[scamden]

@jdalton

Continuing to use Babel is the way at the moment until I can get to making esm work.

Is this still the recommendation? jest is the last barrier between converting our entire code base to esm...

[matsp]

If I understand this correctly, this "issue" is not anymore existing with the newest Node version which enables ESM modules?

[victorperin]

The latest version of node now implemented the new module loader. Does it work on Jest?

[scamden]

From my scans of GitHub threads, it seems like jest has its own require implementation so even on the new experimental module system in node it wasn’t working, but I don’t know for sure and that’s why I was hoping @jdalton might update this thread :)

[sheerun]

Node's ES modules don't solve it at all (they require package.json with "type": "module", require explicit extensions in imports, and they don't allow interop between CJS and ES6 modules).

I'm cheering for this to be added @jdalton Maybe you could publish some simplified (or slow) implementation in the meantime?

[machineghost]

@sheerun instead of the "type": "modules" entry in package.json you can also use the .mjs extension 😱 🙀 ... you know, instead of the .js extension which we've all used, and which has worked just great for over two decades 😉

Seriously, why does the Node org hate us all so much? Thank god for @jdalton.

[damianobarbati]

Yeah Node guys are definitely making a mess.
We won't have ESM working for years because of the incompatibility and exports/type requirement.
But I trust those guys so it was probably inevitable.

The only choice nowadays is ESM, thanks @jdalton.

[bencondon]

What's the suggested solution to work with jest and esm in its current state?

[damianobarbati]

@bencondon the solution is using jasmine and wait for better times 😂

[JakeChampion]

I've been adding this to the top of my jest test files and it works great:

const esmImport = require('esm')(module);
const moduleBeingTested = esmImport('../src/module');

E.G.

// ./src/add.js
export function add (a,b) {
  return a + b;
}

// ./test/add.test.js
const esmImport = require('esm')(module);
const add = esmImport('../src/add).add;

describe('add', () => {
  it('works as expected', () => {
    expect(add(1,1).toBe(2);
  });
)};

[dandv]

See also the Native support for ES Modules.

[rafaeleyng]

@JakeChampion Tested your suggestion and it works. It doesn't seem to work with jest.mock, though. Any idea on how to work with jest.mock?

[the21st]

@JakeChampion is it possible to make your solution work in a Typescript project?

[JakeChampion]

@the21st No idea as I don't use TypeScript, sorry about that.

[KyranRana]

Any idea on how this is coming along? When it will be ready?

[dav1app]

It seems that Jest is trying to make ESM modules natively available. I understand why it is hard to make it available for general usage, but I also cannot understand why you simply cannot -r esm to solve this.

jestjs/jest#9430

[nichegosebe]

babel.config.js - done
jest.config.js - done
...
SyntaxError: Cannot use import statement outside a module