@vue/vue3-jest: Error when using second script tag to export a variable

[kinoli]

I have to add a second script tag because I need to export a variable for usage in storybook and jest. In storybook all is well, however Jest gives me issues. I followed the readme exactly. I'm guessing the transform doesn't handle multiple script tags. Here's the relevant info.

.vue file

<script>
export const storeMod = 'myVuexModuleNamespace';
... other imports
</script>

<script setup>
...
</script>

jest.config.js

transform: {
  '^.+\\.vue$': '@vue/vue3-jest',
},

Error message in Jest

  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/... my file
          ^
    SyntaxError: Identifier 'storeMod' has already been declared

[oberocks]

I have the same problem. Jest 26 and vue-jest weren’t picking up on it, but jest 27 and vue3-jest totally are.

for me right now the only solve is to revert the component to a defineComponent() compAPI approach and drop the “script setup” syntax.

Which is a bummer because I’m working on a design system of these things.

Also, if anyone’s using headlessUI, for me anytime I use one of their components I also need to drop the “script setup” and go with the compAPI defineComponent() approach to get jest testing to pass as expected. HeadlessUI compos return a <!—[object object]—> for me when script setup syntax is in the house.

I’m new to jest so I can’t help much otherwise yet :( so any help or insight (especially if I should keep my cleaner script setup code for future patches!) would be genuienly appreciated!

[jess-ika]

Hi same problem here with jest 28 and vue3-jest, except we have vue-compat installed for now before going full vue3.

[marina-mosti]

Similar problem with jest 27.5.1 and vue3-jest 27 In our case, the test runs fine, but the --coverage collection errors out.

This seems to only be affected when running a test directly, i.e. yarn jest MyComponent --coverage. Clearing the cache with --clearCache fixes it sometimes, making me believe that collecting cache for the files from a non-targeted file, aka jest --coverage will cache the coverage and it won't break anymore until the cache is invalidated or expired.

Example output:

> 20 | export default /*#__PURE__*/Object.assign(__default__, {
     | ^
  21 |   name: 'MyComponent',
  22 |
  23 |   setup(__props, {
STACK: SyntaxError: /../MyComponentvue: Only one default export allowed per module. (20:0)

[Adnan-kreiker]

Any updates on this? I'm having the same issue here, but I'm using vue 2.7 , I'm using a second script tag to add name property to a component.

[jess-ika]

On our side, we switched from jest to vitest

[kimbaudi]

I am also facing this issue. When I run jest --coverage, I get the Failed to collect coverage from error message along with Identifier not found error message. For example, I have a Zoom.vue component with the following form/structure:

<script>
import { ref, onMounted } from "vue";
</script>

<script setup>
... code goes here
</script>

and the error message is Failed to collect coverage from Zoom.vue. ERROR: Identifier 'ref' has already been declared.