Tsx with storybook fails when using defineComponents

[MichaelBitard]

Describe the bug Tsx component test fails when using defineComponent

We want to use/test tsx components in our application but we are facing one strange issue.

We have one function component which works in all cases (app, storybook, tests):

import { DomaineId, DOMAINES_IDS } from 'camino-common/src/static/domaines'
import Pill from '../_ui/pill.vue'

export function Toto(props: {domaineId: DomaineId}) {
  return (
      <Pill color={`bg-domaine-${domaine}`} class="mono">
        { domaine }
      </Pill>
      )
}

and the other syntax (with defineComponent) fails with a not easy to understand error:

TypeError: Cannot read properties of undefined (reading 'modules')
 ❯ comp.setup ../../../../../../../@fs/__vue-jsx-ssr-register-helper:6:17
 ❯ callWithErrorHandling ../../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:157:22
 ❯ setupStatefulComponent ../../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7180:29
 ❯ setupComponent ../../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7132:11
 ❯ mountComponent ../../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5464:13
 ❯ processComponent ../../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5439:17
 ❯ patch ../../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5043:21
 ❯ mountChildren ../../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5226:13
 ❯ mountElement ../../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5137:13
 ❯ processElement ../../../node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5120:13

To Reproduce Steps to reproduce the behavior:

We have 3 files involved:
1- the file launching the tests -> https://github.com/MTES-MCT/camino/blob/tsx/packages/ui/src/storybook.spec.ts
(cleanup up file below)

import { describe, expect, test, vi } from 'vitest'
import type { Meta, StoryFn } from '@storybook/vue3'
import { render } from '@testing-library/vue'
import { composeStories } from '@storybook/testing-vue3'
import type { ContextedStory } from '@storybook/testing-vue3/dist/types'

type StoryFile = {
  default: Meta
  [name: string]: StoryFn | Meta
}

describe('Storybook Smoke Test', async () => {
  const modules = await Promise.all(
    Object.values(import.meta.glob<StoryFile>('../**/toto.stories.ts')).map(fn =>
      fn()
    )
  )
  describe.each(
    modules.map(module => ({ name: module.default.title, module }))
  )('$name', ({ name, module }) => {
    test
      .each(
        Object.entries<ContextedStory<unknown>>(composeStories(module)).map(
          ([name, story]) => ({ name, story })
        )
      )('$name', ({ story }) => {

      const mounted = render(story())
      expect(mounted.html()).toMatchSnapshot()
    })
  })
})

The component: https://github.com/MTES-MCT/camino/blob/tsx/packages/ui/src/components/_common/toto2.tsx

import { defineComponent } from 'vue'

export default defineComponent({ render() { return <div>Test</div> }})

The story: https://github.com/MTES-MCT/camino/blob/tsx/packages/ui/src/components/_common/toto2.stories.ts

import { Meta } from '@storybook/vue3'
import Toto from './toto2'

const meta: Meta<typeof Toto> = {
  title: 'Common/Toto2',
  component: Toto
}
export default meta

export const Default = () => ({
  components: { Toto },
  template: '<Toto />'
})

Expected behavior

The test should work but we get this error instead.

Related information:

• @testing-library/vue version: 6.6.1
• Vue version: 6.5.13
• node version: v19.1.0
• npm (or yarn) version: 8.19.3

[MichaelBitard]

Solved... we missed the https://vitest.dev/config/#transformmode-web mode.

Sorry