Still having issues with Vue 2.7 and <script setup>

[mohammedzamakhan]

I am trying to migrate to Vue 2.7, and was successful except when I updated a simple component to use <script setup> and tried running the tests, it failed, updated the @vue/vue2-jest package to 29.1.1, but I am still getting the same error.

[Vue warn]: Error in render: "Error: [Vue warn]: Property or method "tooltip" 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.

<template>
  <font-awesome-icon
    v-tooltip="tooltip"
    data-html2canvas-ignore
    class="info-icon"
    :icon="icon"
  />
</template>

<script setup>
import VueTypes from 'vue-types'
import { computed } from 'vue'

const props = defineProps({
  icon: VueTypes.object.def({
    iconName: 'info-circle',
    prefix: 'far',
  }),
  tooltipContent: VueTypes.string,
  tooltipPlacement: VueTypes.string.def('bottom'),
  trigger: VueTypes.string.def('hover'),
  tooltipClasses: VueTypes.string.def('tooltip-small'),
})

const icon = props?.icon

const tooltip = computed(() => ({
  classes: props.tooltipClasses,
  placement: props.tooltipPlacement,
  content: props.tooltipContent,
  trigger: props.trigger,
  delay: {
    show: 100,
    hide: 50,
  },
}))
</script>

After seeing this PR #489, I updated it to 29.1.1, hoping it might fix it :(

[mohammedzamakhan]

@kiroushi do you think I'm doing anything incorrectly here?

[kiroushi]

@mohammedzamakhan try setting the resolver explicitly:

  transform: {
    '\\.vue$': '@vue/vue2-jest',
  },

Also setting the overrides for vue-cli in case you’re using it:

  "overrides": {
    "@vue/cli-plugin-unit-jest": {
      "@vue/vue2-jest": "29.1.1",
      "jest": "29.0.3"
    },

[mohammedzamakhan]

Just updating Jest to 29 worked for me!!! Thanks @kiroushi