Closed MichaelBitard closed 1 year ago
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:
defineComponent
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
Vue
node
npm
yarn
Solved... we missed the https://vitest.dev/config/#transformmode-web mode.
Sorry
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):
and the other syntax (with
defineComponent
) fails with a not easy to understand error: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)
The component: https://github.com/MTES-MCT/camino/blob/tsx/packages/ui/src/components/_common/toto2.tsx
The story: https://github.com/MTES-MCT/camino/blob/tsx/packages/ui/src/components/_common/toto2.stories.ts
Expected behavior
The test should work but we get this error instead.
Related information:
@testing-library/vue
version: 6.6.1Vue
version: 6.5.13node
version: v19.1.0npm
(oryarn
) version: 8.19.3