[Bug] jest-transform missing

[j3rem1e]

Describe the bug

'jest-transform' was part of the public API and allow to test stories written in svelte with jest.

It has been removed (moreover in a minor version while is a breaking change). I don't use vitest. Is it possible to repackage this file here ?

[benmccann]

Looks like it was removed in https://github.com/storybookjs/addon-svelte-csf/pull/113

It wasn't very much code, so I wouldn't have an objection to adding it back. However, my experience has been that Jest is very difficult to use with Svelte because it treats ESM support as a second-class citizen. Only about 4% of Svelte users use Jest as far as I can tell: https://npmcharts.com/compare/svelte,svelte-jester

Have you upgraded your own projects to Svelte 4 @j3rem1e? There are new versions of svelte-jester and @testing-library/svelte that support Svelte 4, but some users found it easier to simply switch to vitest than get Jest to work with Svelte 4. It's the only library I've encountered that's caused users some amount of pain in upgrading to Svelte 4 and I wonder if you won't end up just switching. We should probably make sure you're going to stick with Jest before adding support back here.

If Jest is not restored, it looks like there's a couple devDependencies that can be removed from this project

[j3rem1e]

Yes, I use Svelte 4 and Jest. It was not really hard to migrate, you just have to chain babel-jest after using a svelte-transformation, something svelte-jester could do instead of throwing an error.

And it was easiest than using vitest. it just crash too much on my environment, and forces me to migrate all my dependencies to esm, which is today not possible.

Honestly, I am a little tired of this javascript ecosystem where everything just breaks every day. The fact that cjs have been removed from svelte "just because we can" without any real benefit is just a new manifestation to me that the javascript environment is not really mature today. I just want to do my work, and not lost time on tooling because someone just decided to break half of the dependencies. My java backends developed ten years ago works today without major changes.

I hope too you just don't make plans on site like npmcharts. I don't know any real world business app published on npm today, at least in the domain in work for ^^

sorry for my answer, I know github is not the place to complain but you throw me a line! That's said, I am always a big Svelte fan since years

[benmccann]

Glad to hear you were able to migrate without too much difficulty! If you have anything you could share regarding your setup it'd be helpful to us in guiding other users. A PR to svelte-jester would be amazing. Or a sample repository or blog post would also be great and are things we'd try to share in places where they would be discovered. None of the Svelte maintainers use Jest or Babel, so any help we can get from the community on improving setup for Jest is very much appreciated.

I definitely understand that removing CJS can cause some headache. However, as far as we're aware, it's seen very little usage. npmcharts obviously isn't perfect data, but about 1/3 of users have migrated to Svelte 4 and we haven't heard about too many people running into difficulty. So as far as we can tell, its not used that much - though I'm open to more data on this. SvelteKit projects have been ESM-only since day one in 2020 and make up a good fraction of Svelte usage these days. Supporting both CJS and ESM has a very high maintenance burden and is becoming less and less relevant. The majority of Svelte users use Vite which is also planning on phasing out CJS support starting in Vite 5 (no longer outputting CJS for SSR) and Vite 6 (distributing Vite itself as ESM-only). By knowing that all of our users have ESM-based projects it's so much easier to support them and ensure that things are working by reducing the number of permutations of things we need to test. While the transition isn't as far along in the broader ecosystem, in the Svelte ecosystem specifically things have progressed very far.

I'll note that none of this means you can't use CJS dependencies. It will take forever to migrate all dependencies in the JS ecosystem and isn't something we're pushing at all. It's really just the build and development chains that we're trying to simplify to make life easier for everyone. Obviously the transition is hard, but things get so much easier once you can pull up any piece of documentation, tutorial, etc. and not have to worry about whether it's compiled to CJS or ESM because everything is ESM. And we're not that far away from that. Vitest definitely should not force you to migrate your dependencies to ESM. Vite and by extension Vitest works just fine with CJS dependencies.

The old Jest transform was CJS. I don't know if that'd work in an ESM Jest project. If we do add back the transform, we might have to add it in both formats.

[j3rem1e]

Glad to hear you were able to migrate without too much difficulty! If you have anything you could share regarding your setup it'd be helpful to us in guiding other users. A PR to svelte-jester would be amazing. Or a sample repository or blog post would also be great and are things we'd try to share in places where they would be discovered. None of the Svelte maintainers use Jest or Babel, so any help we can get from the community on improving setup for Jest is very much appreciated.

Svelte generate now esm, so you have to chain the output to babel:

transform: {
    "\\.svelte$": [
      'jest-chain-transform',
      {
        transformers: [
          'jest-svelte-transform', 'babel-jest'
        ]
      }
    ]
  }

I didn't have any issue with my test with this conf.

I'll note that none of this means you can't use CJS dependencies. It will take forever to migrate all dependencies in the JS ecosystem and isn't something we're pushing at all. It's really just the build and development chains that we're trying to simplify to make life easier for everyone. Obviously the transition is hard, but things get so much easier once you can pull up any piece of documentation, tutorial, etc. and not have to worry about whether it's compiled to CJS or ESM because everything is ESM. And we're not that far away from that. Vitest definitely should not force you to migrate your dependencies to ESM. Vite and by extension Vitest works just fine with CJS dependencies.

I never succeeded to configure vitest to uses the svelte plugin. it is marked as "type":"module" and doesn't have "main" export. It was not possible to require or import it in vite.config.js but I had probably do something wrong. like a said before, using jest was easy, so I didn't try to hack this for weeks.

[benmccann]

Thanks for sharing! I don't see a jest-svelte-transform on npm. Is that something you wrote yourself locally or did you mean jest-transform-svelte?

[j3rem1e]

Oh sorry, it's based from jest-transform-svelte, yes. but updated for my needs (ie Svelte 4) and integrated in my production pipeline. It's really simple (I don't use preprocessor, and jsdoc instead of typescript)

/* eslint-env node */
const svelte = require('svelte/compiler');

function process(src, filename) {
  const result = svelte.compile(src, {
    filename,
    dev: true,
  });

  const code = result.js ? result.js.code : result.code;

  const z = {
    code: code,
    map: result.js ? result.js.map : result.map,
  };
  return z;
}

exports.process = process;

and you have to transpile svelte too :

transformIgnorePatterns: ["node_modules\\\\(?!(svelte)).*\\.js$"],

[j3rem1e]

Storyshot seem to be deprecated, according to discussion on storybook github. I'll close this issue then.

[artemkliaus]

@j3rem1e Thank you for your solution. I have a similar issue, but the complexity is that we are using TypeScript for Svelte components in our project. I tried to use a preprocessor, but it seems it's not possible with it. What should I do in this case?