Vue tsx component type definition 'any' in typescript project issue when unit-testing.

Problem: I create vue 3 TSX project with default selection from vue cli, typescript, jest. When testing my component, it not show type define on my component in vs code intellisense. It show up as any. It not right since I am use typescript.

This issue just recently like 1 week or 2. Like 2 week ago, I create vue 3 typescript with jest enable. And it work and show up type define component on my IDE then. Now I just create new project vue 3. it not show type define on my component on my IDE.

Reproducible Case

• vs code IDE
• Create new vue 3 project with vue cli
• select typescript, jest

Sample code with typescript, jest enable. create App.tsx and in example.spec.ts file with follow code:

// App.tsx
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
  data() {
    return {
      timer: null
    }
  },
  methods: {
    handleSendMessage() {
      console.log('handleSendMessage()')
    }
  },
  render() {
    return (
      <div>
        App component in tsx
      </div>
    )
  }
})
// example.spec.ts
import { shallowMount } from '@vue/test-utils'
import App from '@/App' // same problem if use relative import like ../../scr/App

describe('App.vue', () => {
    it('testing', () => {
      const wrapper = shallowMount(App)
      wrapper.vm.  // <--- after . my IDE would show all property on this component like all methods, data, etc. It do not show up here.
    })
})

Side note: it did work before on vue 3 project. I also test on vue 2 tsx project. it work fine there.

[lmiller1990]

Right, that makes sense… derp. Thanks for picking this up @pikax.

We will fix the types and remove the class component dependency in the next release.

[pikax]

You can fix this by running: npm i vue-class-component@8.0.0-beta.4

The cause is that dependency is not shipped with vue-test-utils, I’ll have a look on the types