jest + npm = fail?
Unanswered
Spectacled bear posted this in #help-forum
Spectacled bearOP
I'm finding that I can't write jest tests for many of my components due to jest not transforming code in
ESM modules have been around for a long time, lots of stuff on npm is using them, I'm surprised such a fundamental issue still persists. I did try enabling ESM modules in node, per the jest documentation, but then my local code still gets converted to commonjs and breaks because I now have the inverse problem.
I know I could keep going down this rabbit hole and find a hacked together solution, but it just seems standard that a lot of you next.js developers would be wanting the exact same thing (the ability to write jest tests AND use packages from npm). Under a custom setup (non-next.js) I expect this wouldn't be so difficult, but next.js's opinionated nature means its a bit harder to modify the guts of things in cases like this.
Has anyone figured out an elegant solve or a recommended approach? I'm hoping I'm just overlooking a common fix that people just don't talk about because its obvious and I'm just missing it.
node_modules. How do people generally get around this? I've read through tons of articles and stackoverflows, and nothing is a great solve. It seems so hacky to adjust transformIgnorePatterns in jest.config, in the way that works with next.js, by returning an async function which post-modifies the config, and it doesn't work for all modules.ESM modules have been around for a long time, lots of stuff on npm is using them, I'm surprised such a fundamental issue still persists. I did try enabling ESM modules in node, per the jest documentation, but then my local code still gets converted to commonjs and breaks because I now have the inverse problem.
I know I could keep going down this rabbit hole and find a hacked together solution, but it just seems standard that a lot of you next.js developers would be wanting the exact same thing (the ability to write jest tests AND use packages from npm). Under a custom setup (non-next.js) I expect this wouldn't be so difficult, but next.js's opinionated nature means its a bit harder to modify the guts of things in cases like this.
Has anyone figured out an elegant solve or a recommended approach? I'm hoping I'm just overlooking a common fix that people just don't talk about because its obvious and I'm just missing it.
3 Replies
Spectacled bearOP
I'm going through https://github.com/topics/nextjs-example and am so far finding zero repositories with tests. Do people just not write tests??
Brown bear
I have been using viTest with similar frustrations. I have had some success by isolating components that fetch data, from the fetch itself.
- client components are perfectly testable
- server components that do not fetch data are also testable
- if you pull the fetch logic out to their own functions, you can test that without too much trouble, but I have not found a way to test the server component that fetches the data.
- client components are perfectly testable
- server components that do not fetch data are also testable
- if you pull the fetch logic out to their own functions, you can test that without too much trouble, but I have not found a way to test the server component that fetches the data.
I have been using RTL for my tests, and wrap the components/functions I want to test with a test component so I can get at the data I am trying to verify. It is a bit of effort to setup, but seems to work.