Update to latest compiler-sfc version

[martinszeltins]

Describe the bug

When using the <script setup> syntax sugar the Vue test utils throws an error. This is not a problem if using the regular syntax. Using Test Utils 2.0.0

Reproduction

Reproduction link:
https://github.com/martinszeltins/Vue-test-utils-vite-setup-error

Given that we have a Button component using <script setup>

<template>
    <div class="button">
        <div
            class="button__content">
            {{ msg }}
            My button
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue'

    const msg = ref('Hello')
</script>

And we create a test for it - then it throws and error

import { shallowMount } from '@vue/test-utils'
import Button from '@/components/Button.vue'

describe('Button.vue', () => {
  it('passes this test', () => {
    const wrapper = shallowMount(Button)
    expect(wrapper.text()).toMatch('My button')
  })
})

It throws an error

FAIL  tests/unit/example.spec.js
  Button.vue
    ✕ passes this test (33ms)

  ● Button.vue › passes this test

    TypeError: Cannot read property 'subTree' of undefined

       5 |   it('passes this test', () => {
       6 |     const wrapper = shallowMount(Button)
    >  7 |     expect(wrapper.text()).toMatch('My button')
         |                    ^
       8 |   })
       9 | })
      10 | 

      at VueWrapper.get [as hasMultipleRoots] (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:1911:30)
      at VueWrapper.get [as element] (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:1926:25)
      at VueWrapper.text (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:1967:27)
      at Object.<anonymous> (tests/unit/example.spec.js:7:20)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total

System Info

• required vite version: 1.0.0-rc.13
• required Operating System: Ubuntu Linux
• required Node version: 12.18.2
• Optional:
  • npm version: 6.14.8
  • Installed vue version: 3.0.3
  • Installed @vue/compiler-sfc version: 3.03

[afontcu]

I'm transferring this issue to the appropriate repo

[lmiller1990]

Actually, this is related to vue-jest. The tests pass if you install the old version of Vue 3 and compiler-sfc: yarn add vue@3.0.0 @vue/compiler-sfc@3.0.0.

The problem is <script setup> keeps on changing. I will transfer this issue to vue-jest. Most likely all that needs to happen is upgrading the version of compiler-sfc in vue-jest.

[lmiller1990]

I see... <script setup> is really different since I last checked. I will investigate supporting this.

[lmiller1990]

Hm. Something has changed in core as well, the result of createApp(Foo).mount(...) appears to be slightly different. 🤔

[lmiller1990]

Ok, problem seems to be Test Utils specific. The latest <script setup> works fine without Test Utils: #305

Likely the above PR will need to be merged and released, and Test Utils should be patched, too.

[lmiller1990]

@martinszeltins Found a fix, not pretty but it works. https://github.com/vuejs/vue-test-utils-next/pull/264/files

It will require a release for VTU and vue-jest. Please wait a few days, need a review (probably from Evan or someone else more familiar with Vue core, since I don't really understand why this fix works).

You could help by reviewing or testing - you'd need to pull both the branches, build test-utils, and try it out.

[lmiller1990]

This is deployed.

[wesley-spencer]

@lmiller1990 Currently using Nuxt 2 w/ Composition API being imported through nuxt.config When running Jest I get this error. any chance you could help?

● Test suite failed to run

   This must be called within a setup function.
   
     57 | <script setup>
     58 | import { useContext } from "@nuxtjs/composition-api"
     59 |
   > 60 | const { $axios, $toast } = useContext()
        | ^
     61 | const emit = defineEmits(["input"])
     62 |
     63 | const props = defineProps({

solution:https://discord.com/channels/473401852243869706/496371343542059011/941478882316533770