Issue with script and script setup in the same vue file

[renansoares]

Hi,

I have been having an issue with my tests when testing components that have two script tags in the same vue file.

For example, this component:

<template>
    <h1>{{ message }}</h1>
</template>

<script>
import logger from '@/utils/logger';

const test = 'value';
</script>

<script setup>
const props = defineProps({
    message: { type: String, default: '' }
});
</script>

Is throwing this error:

I did some tests debugging the implementation of the output from the process.js file. That's what I got:

  code: '"use strict";\n' +
    '\n' +
    "const test = 'value';\n" +
    '"use strict";\n' +
    '\n' +
    'Object.defineProperty(exports, "__esModule", {\n' +
    '  value: true\n' +
    '});\n' +
    'exports.default = void 0;\n' +
    "const test = 'value';\n" +
    'var _default = {\n' +
    "  __name: 'test-setup',\n" +
    '  props: {\n' +
    '    message: {\n' +
    '      type: String,\n' +
    "      default: ''\n" +
    '    }\n' +
    '  },\n' +
    '\n' +
    '  setup(__props) {\n' +
    '    const props = __props;\n' +
    '    return {\n' +
    '      __sfc: true,\n' +
    '      test,\n' +
    '      props\n' +
    '    };\n' +
    '  }\n' +
    '\n' +
    '};\n' +
    'exports.default = _default;\n' +
    "var __options__ = typeof exports.default === 'function' ? exports.default.options : exports.default\n" +
    'var render = function render() {\n' +
    '  var _vm = this,\n' +
    '    _c = _vm._self._c,\n' +
    '    _setup = _vm._self._setupProxy\n' +
    '  return _c("h1", [_vm._v(_vm._s(_vm.message))])\n' +
    '}\n' +
    'var staticRenderFns = []\n' +
    'render._withStripped = true\n' +
    '\n' +
    '__options__.render = render\n' +
    '__options__.staticRenderFns = staticRenderFns\n',

The const test defined in the script setup was added twice to the final output leading the test to fail because of the error above.

I figure out that changing the implementation of scriptResult and scriptSetupResult in the process.js file to the following, made my tests to run again:

let scriptResult;
  const scriptSetupResult = processScriptSetup(descriptor, filename, config)

  if (!scriptSetupResult) {
    scriptResult = processScript(descriptor.script, filename, config)
  }

From my understanding, when there is a script setup, it is adding all the code of the normal setup twice. Only adding the scriptSetup in case of not having a scriptSetupResult seems to solve the issue.

This issue is blocking the migration to Jest 19 and consequently to test our script setup components.

Could I help on this? I'm happy to create a merge request if my fix sounds a good one.

[lmiller1990]

Just to clarify this is for Vue 2 (not Vue 3)? That's the PR you've submitted.

[quienti]

Hi!

It is possible to do the same fix for Vue3 ? We have the same issue

Thanks !

[lmiller1990]

@quienti sure thing, would you like to make a PR similar to #536?

I don't have much time to work on vue-jest nowadays, but I can help by reviewing, merging and releasing new versions. I hope we can find a maintainer with more bandwidth sometime.

[quienti]

@lmiller1990 I tried to do this => https://github.com/vuejs/vue-jest/pull/541

I don't know if it will work :/

[quienti]

This issue can be closed