@vue/vue2-jest: Second script tag in components not loading

[jaythomas]

vue: 2.7.10 jest: 29.2.1 @vue/vue2-jest: 29.1.1

My App.vue component has an options api script block and setup script block. It's apparent the second script block isn't picked up because it doesn't see any variables defined or components registered within the script block. The test completes with a failure and I see several [Vue warn] messages such as:

 console.error                                          
    [Vue warn]: Property or method "status" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring
-Reactive-Properties.                                                                                                                              

    found in                                                                                                                                       

    ---> <Anonymous>                                                                                                                               
           <Root>                                                      

      73 |     throw e                                                                                                                             
      74 |   }
    > 75 | })
         |   ^
      76 | </script>
      77 |
      78 | <style lang="scss">

      at warn (node_modules/vue/dist/vue.runtime.common.dev.js:4516:21)
      at warnNonPresent (node_modules/vue/dist/vue.runtime.common.dev.js:5168:9)
      at Object.get (node_modules/vue/dist/vue.runtime.common.dev.js:5218:21)
      at Proxy.render (src/app-gizmos-main/App.vue:75:24)
    ....

Removing the first script block and leaving the <script setup> block the test runs as expected. In a perfect world I wouldn't have multiple script blocks sure, but since Vue supports this in the browser I would expect vue-jest to maintain feature parity.

App.vue

```vue ```

devDependencies

```json "devDependencies": { "@babel/eslint-parser": "^7.18.9", "@playwright/test": "^1.22.2", "@rollup/plugin-alias": "^3.1.4", "@rollup/plugin-commonjs": "^17.1.0", "@rollup/plugin-node-resolve": "^11.2.0", "@vue/cli": "5.0.8", "@vue/cli-plugin-babel": "^3.12.1", "@vue/cli-service": "^3.0.4", "@vue/eslint-config-standard": "^4.0.0", "@vue/test-utils": "^1.2.0", "@vue/vue2-jest": "^29.1.1", "acorn": "^6.4.2", "axios-mock-adapter": "^1.21.2", "babel-core": "^7.0.0-bridge.0", "babel-jest": "^29.1.2", "clipboard-copy": "^4.0.1", "dotenv-cli": "^6.0.0", "eslint": "^8.20.0", "eslint-import-resolver-jest": "^3.0.2", "eslint-import-resolver-webpack": "^0.13.2", "eslint-plugin-import": "^2.26.0", "eslint-plugin-vue": "^9.1.0", "flush-promises": "^1.0.2", "git-rev-sync": "^3.0.2", "jest": "^29.2.1", "jest-environment-jsdom": "^29.2.0", "jest-serializer-vue": "^2.0.2", "jest-watch-typeahead": "^2.2.0", "less": "3.13", "less-loader": "4.1", "node-sass": "^6.0.1", "prettier": "^2.3.0", "rollup": "^2.53.3", "rollup-plugin-scss": "^2.6.1", "rollup-plugin-vue": "^5.1.9", "sass": "^1.32.13", "sass-loader": "^10.2.0", "sinon": "^14.0.0", "start-server-and-test": "^1.14.0", "vue-jest": "^4.0.1", "vue-loader": "15.10.0", "vue-template-compiler": "2.7.10" } ```

jest.config.js

```js module.exports = { // Automatically clear mock calls and instances before every test. // Equivalent to calling jest.clearAllMocks() before each test. // This does not remove any mock implementation that may have been provided. clearMocks: true, // The directory where Jest should output its coverage files coverageDirectory: 'jest/coverage', // A list of reporter names that Jest uses when writing coverage reports coverageReporters: [ // 'json' 'html', // Check out coverage/lcov-report/index.html 'lcov', 'text' ], moduleFileExtensions: ['js', 'json', 'vue'], moduleNameMapper: { // Support the app's @ -> src alias mapping '^@/(.*)$': '/src/$1', '^~/(.*)$': '/$1', '^~helpers(.*)$': '/jest/helpers$1', '^~mocks(.*)$': '/jest/mocks$1', '\\.(css|less|scss)$': '/jest/helpers/asset-stub.js' }, roots: ['/src/'], setupFilesAfterEnv: ['/jest/setup/index.js'], // Path to the helper that tells Jest where to fetch and retreive snapshot artifacts // https://jestjs.io/docs/en/configuration.html#snapshotresolver-string snapshotResolver: '/jest/helpers/snapshot-resolver.js', // De-facto snapshot serializer for vue2 components, but doesn't work with vue3 snapshotSerializers: ['jest-serializer-vue'], testEnvironment: 'jsdom', testMatch: ['**/?(*.)+(spec|test).[jt]s'], transform: { '\\.js$': 'babel-jest', '\\.vue$': '@vue/vue2-jest' }, // Indicates whether each individual test should be reported during the run verbose: null, watchPlugins: [ require.resolve('jest-watch-typeahead/filename'), require.resolve('jest-watch-typeahead/testname') ] } ```

I don't know how to use a code sandbox to reproduce, but if there is any further information I could provide let me know.

[jaythomas]

I can confirm that vue 2.7 detection is happening in node_modules/@vue/vue2-jest/lib/process.js. The isVue27 boolean is flipped to true as expected. I assume none of the <script setup> syntax in any of my components' tests would work otherwise.

[rudolfbyker]

I'm getting the same error, but I don't think it's because of multiple <script> tags. Here is my minimal reproduction: https://github.com/rudolfbyker/repro-vue-jest-issue-505

[vate]

Happening also to me with only Githubissues.

Githubissues is a development platform for aggregating issues.