Closed Rob-Negrete closed 7 months ago
Thanks for reporting and working on a fix in #335.
How can we reproduce this issue exactly?
Do you have any pointers of other projects having similar issues with Jest? I would like to better understand what's going on.
Hi @josdejong,
it’s a monorepo project having several modules. I’ve added several libs recently, however this is the only one lib having the issue.
It is like if the module wasn’t being detected or something at least at testing time.
It is like if the module wasn’t being detected or something at least at testing time.
Indeed, and the question is why. How can I reproduce this issue?
I tried to reproduce it on a separated project (standalone without monorepo) but worked fine. So, I'll to set up a tiny monorepo project and try to reproduce the error on it. If I had success, I'll share it to you.
Thanks Rob!
I'd sent you an invitation to my repo which you can use it to reproduce the error.
Thanks for setting up the demo, I can reproduce the issue in your setup. It's quite a complex setup though 😅 .
I've done a bit of digging. The root cause seems to be that Jest does not have full ESM support (it is still marked experimental).
require
field (CommonJS) in the package.json that points to the ESM file indeed works, see https://stackoverflow.com/a/75595580/1262753. It feels odd though to do that, I'm not sure whether other tools will get confused because of that, effectively breaking more than we fix with it.--experimental-vm-modules
flag, see https://jestjs.io/docs/ecmascript-modules. useESM
option of ts-node
, see https://github.com/jestjs/jest/issues/13739#issuecomment-1655607116 and https://kulshekhar.github.io/ts-jest/docs/guides/esm-support/.ts-jest/presets/default-esm
preset, see https://github.com/jestjs/jest/issues/13739#issuecomment-1655663846 vanilla-jsoneditor
related issue. And if they do not give the same issue, we can have a look at their package.json
to see what's the difference.I haven't found a solution yet except for the require
field hack. I have to say, I've intensively used a lot of different test libraries in the past, and most of them work great, only Karma and Jest where always giving me troubles. Jest has difficulties with TS and ESM and everything, therefore I moved away from it. I'm mostly using vitest
nowadays, works like a charm.
I think there are three options to solve this issue:
vanilla-jsoneditor
is currently ESM only. Adding CommonJS support would solve the issue with JestHi @josdejong, thanks for following this up :)
Can you tell me more about option 2, please?
Adding CommonJS support would solve the issue with Jest
If vanilla-jsoneditor
would contain a CommonJS version of the library (alongside ESM), we can let this require
in the package.json point to the actual CommonJS version of the code.
However, this does not have my preference. in general I would love the JS ecosystem to move away from CommonJS and adopt ESM, not the other way around. The current hybrid situation is a big pain. That's why so far I haven't provided a CommonJS version. See: #196
Got it.
I'll try these configs you mentioned:
Various discussions suggest adding certain config for jest and ts-jest:
+ Use a --experimental-vm-modules flag, see https://jestjs.io/docs/ecmascript-modules.
+ Configure the useESM option of ts-node, see https://github.com/jestjs/jest/issues/13739#issuecomment-1655607116 and https://kulshekhar.github.io/ts-jest/docs/guides/esm-support/.
+ Configure a ts-jest/presets/default-esm preset, see
https://github.com/jestjs/jest/issues/13739#issuecomment-1655663846
And let it know if any of them works.
Otherwise, I might go back to jsoneditor 😞.
As a workaround, you could also create a script that copies node_modules/vanilla-jsoneditor/*
into some folder /src/assets/vanilla-jsonedtor
, and then use the files from there: import { JSONEditor } from './src/assets/vanilla-jsoneditor/index.js'
. It's ugly but it should work.
Pretty odd, yeh. But, might help for a while.
Thanks.
Sadly, none of them worked :(
Compared against @tinyhttp/app which it only has this:
"exports": "./dist/index.js",
instead of something like this:
"exports": {
".": {
"types": "./index.d.ts",
"module": "./index.js"
},
"./CHANGELOG.md": "./CHANGELOG.md",
"./index.d.ts": "./index.d.ts",
"./index.js": "./index.js",
"./index.js.map": "./index.js.map",
"./LICENSE.md": "./LICENSE.md",
"./README.md": "./README.md",
"./SECURITY.md": "./SECURITY.md",
"./themes/jse-theme-dark.css": "./themes/jse-theme-dark.css",
"./themes/jse-theme-default.css": "./themes/jse-theme-default.css",
"./package.json": "./package.json"
},
By doing this, it seems to work.
What do you think about it?
Ahh, that is a good idea! We have to make sure that TypeScript can still find the types (should be the case because of the types
in the root of package.json, but we have to check that.
Awesome! I tested it on my setup and it worked. Feel free to use it for your tests.
😎 I'll do some testing next week, this looks promising.
This issue should be fixed now in v0.19.0
, can you give that a try @Rob-Negrete ?
Sure, I'll try it today and let you know ;)
Yei! It worked :)
😎 Awesome!
Hi @josdejong - I'm moving from the old jsoneditor to vanilla-jsoneditor. It was pretty easy, and the component works on runtime as a charm.
However, there's some weird issue when running test cases with jest.
My implementation is basically the same as JSONEditorReact.tsx. Then, when I run tests, this error is thrown:
I've installed
vanilla-jsoneditor": "^0.18.11
and included as part of my dependencies.Accordingly, to what I've read, this can be related to jest-resolver not being able to resolve the types / mapping.
Am I missing something?
Thanks in advance.