Skip to content
This repository has been archived by the owner on Nov 4, 2024. It is now read-only.

jest transform support #706

Open
kenotron opened this issue Jan 16, 2019 · 36 comments
Open

jest transform support #706

kenotron opened this issue Jan 16, 2019 · 36 comments

Comments

@kenotron
Copy link

kenotron commented Jan 16, 2019

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!

@kenotron kenotron changed the title esm 3.1.0 + jest esm 3.1.0 + jest issues with enzyme in a real world'ish repo Jan 16, 2019
@jdalton
Copy link
Member

jdalton commented Jan 16, 2019

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 jdalton changed the title esm 3.1.0 + jest issues with enzyme in a real world'ish repo jest transform support Jan 17, 2019
@kenotron

This comment has been minimized.

@TrySound

This comment has been minimized.

@jdalton

This comment has been minimized.

@ephemer

This comment has been minimized.

@kellengreen

This comment has been minimized.

@ashton

This comment has been minimized.

@matsp

This comment has been minimized.

@jdalton
Copy link
Member

jdalton commented Jan 29, 2019

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

@avaly

This comment has been minimized.

@dandv
Copy link

dandv commented Apr 28, 2019

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

@chungchi300
Copy link

Any updates?

@jdalton
Copy link
Member

jdalton commented May 6, 2019

@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
Copy link

onigoetz commented May 6, 2019

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"
    }
}

@ActuallyACat

This comment has been minimized.

@onigoetz

This comment has been minimized.

@damianobarbati
Copy link

@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
Copy link

topheman commented Aug 8, 2019

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 esm@3.2.25 to esm@3.1.0.

  1. 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
Copy link

machineghost commented Sep 17, 2019

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
Copy link

scamden commented Nov 22, 2019

@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
Copy link

matsp commented Nov 22, 2019 via email

@victorperin
Copy link

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

@scamden
Copy link

scamden commented Nov 22, 2019

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
Copy link

sheerun commented Jan 15, 2020

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
Copy link

machineghost commented Jan 15, 2020

@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
Copy link

damianobarbati commented Jan 15, 2020

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
Copy link

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

@damianobarbati
Copy link

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

@JakeChampion
Copy link

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
Copy link

dandv commented Jan 22, 2020

See also the Native support for ES Modules.

@rafaeleyng
Copy link

@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
Copy link

the21st commented Mar 26, 2020

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

@JakeChampion
Copy link

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

@KyranRana
Copy link

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

@dav1app
Copy link

dav1app commented Oct 4, 2020

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
Copy link

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Development

No branches or pull requests