Mount .tsx component

[Dolyka]

Hi all

How can I mount a .tsx component using @vue/test-utils?

Used:
vitest latest
vue latest
@vue/test-utils latest

It was found:
If defineComponent is not used in the .tsx component, then the test does not fail.

File:

Error:

[cexbrayat]

It should work out of the box. Try to generate a project with create-vue and pick the TypeScript/JSX support to see how it is configured. If you think you found an issue, please add a reproduction so we can take a look (you can build one in a few minutes online with Stackblitz https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/vue?initialPath=__vitest__ )

[Dolyka]

Thanks for the quick response.

Added reproduction on Stackblitz.
I also remind. If you remove defineComponent, then the test does not fail.

https://stackblitz.com/edit/vitest-dev-vitest-v4pacw?file=components/Spoiler.tsx

[cexbrayat]

Strange indeed, but I don't think this is an issue with VTU as we don't do anything with the components (it's Vite and the Vue plugins that handle them).

So I would say try to open an issue with your repro on https://github.com/vitejs/vite-plugin-vue/ maybe? It looks like the jsx plugin is generating invalid code, as even a super simple component fails:

import { defineComponent } from 'vue';

export default defineComponent({
  render() {
    return 'hello';
  },
});

Renaming the file to .ts instead of .tsx make the test succeeds

[xenm321]

Apparently the problem is with vite. I create a project with npm init vue@latest, create a tsx component

and test for it, with defineComponent the test fails

, without it the test passes
. I created a project with vue create and create the same tsx component with defineComponent and the test passes