Will this play nicely with jest?

[Aaron-Pool]

First of all--thank you SO much. I've been hoping one of the core Vue members would backport script setup to Vue 2.

The only adoption concern I have left after reading the readme is whether this will break my jest tests. I guess it wouldn't be too hard for me to write a basic jest transform using the JavaScript API. But I wasn't sure whether that would play nicely with vue-jest. Any thoughts on this.

[antfu]

I think there should be no problem on that. /cc @lmiller1990 WDYT?

We could ships a simple jest transformer via submodules just like other plugins, tho I am not very familiar with jest, pr will be great welcome!

[Aaron-Pool]

@antfu I did a little digging, and it looks like running multiple transforms on the same file extension is a non-trivial problem.
See the discussion here: jestjs/jest#8725

So it seems like the PR would need to be to submitted to vue-jest, rather than here.

[antfu]

Or we could bypass the transform to vue-jest (as ppl are likely to use it when using jest), something like:

const { transform } = require('vue2-script-setup-transform')

module.exports = (source, id, ...args) {
  const transformed = transform(source, id)

  return require('vue-jest')(source, id, ...args)
}

[lmiller1990]

First off, I am amazed this has been ported to Vue 2. Well done! I haven't looked at how it's implemented exactly, but assuming there is no technical blocker, we could support this in vue-jest.

Considering Vue 2 will not have many more big updates, maintenance should not be too difficult. I am not sure I have time to work on this right now, but since most of the work is done in this code base, I'm guess we just:

• import this into vue-jest
• before we do the usual vue-jest transform, we pass the input to this module, changing the code into a regular SFC
• let vue-jest do the rest of the transform

[Neophen]

Ok so for those running into this issue here's the solution:

create a file vue-setup-transformer.js:

const { transform } = require('vue2-script-setup-transform');
const vueJest = require('vue-jest');

module.exports = {
  process(source, filename, ...args) {
    const transformed = transform(source, filename);
    return vueJest.process(transformed.code, filename, ...args);
  },
};

and then in your jest.config.js replace vue-jest with this custom transformer:

'.*\\.(vue)$': '<rootDir>/vue-setup-transformer.js',

I don't know where i could submit this PR or how to do it, but if you let me know i could most likely do a pr here or for vue-jest?

Edit:
This still seems to have trouble when transforming with external dependencies. it fails at the const transformed = transform(source, filename); and never goes into the vue-jest.process

Trying to figure out why

[antfu]

Glad to see it works!

v0.4.1 ships an experimental support for jest:

npm i -D vue-jest

// jest.config.js
module.exports = {
  transform: {
    '.*\\.(vue)$': 'unplugin-vue2-script-setup/jest',
  },
}

Let me know if it works for you

[Aaron-Pool]

@antfu is this gonna play havoc with source maps? I was actually planning to do a PR for this myself, but I ran into an issue where I wasn't sure how to properly handle combining the source map for this transform with the one vue-jest generates.

[Neophen]

@antfu i found a super weird issue

if you have the word link in a v-for item like so:

<div v-for="(link, index) in links" :key="index" class="py-4 space-y-2">

this will break the transformation with:

ERROR: Unexpected token (1:1)
STACK: SyntaxError: Unexpected token (1:1)

and it doesn't matter it could be just link or adminLink or linkItem it will always break

[Neophen]

This is actually not a problem with jest, but with the whole plugin, added more details here:
link to issue

[dm4t2]

@antfu I tried it with Jest like described in the README.md, but I get the following error:

Module unplugin-vue2-script-setup/jest in the transform option was not found.

There seems to be something missing in the bundle.

[sh786]

I am getting same as @dm4t2

[Aaron-Pool]

@dm4t2 @sh786 I ran into this as well. I'm sure @antfu will fix the issue as soon as he can, but until then, a simple work around is creating a sibling file to your jest config with the below contents:

// jest-script-setup-transform
const { transform } = require('unplugin-vue2-script-setup');

module.exports = {
  process(source, filename, ...args) {
    const transformed = transform(source, filename);
    const code = transformed ? transformed.code : source;
    return require('vue-jest').process.call(this, code, filename, ...args);
  },
};

and then using it like you would the real transform:

// jest.config.js
module.exports = {
  // with your other config options
  transforms: {
    '.*\\.(vue)$': require.resolve('./jest-script-setup-transform.js'),
  }
}