Question: mounting composite-api component ...

[anborg]

I want to test this vite vujs3 compositeapi component. How do I get it to mount in a simple, elegant way?

TodoCreator: https://github.com/anborg/contactsfind-ui/blob/main/src/components/TodoCreator.vue
Spec: https://github.com/anborg/contactsfind-ui/blob/main/src/components/__tests__/TodoCreator.spec.ts

Error log

npm run test:unit

> [email protected] test:unit
> vitest


 DEV  v0.32.2 C:/aa-projects/github-anb/contactsfind-fullstack/contactsfind-uits

stdout | src/stores/__tests__/TodosStore.spec.ts > Todos Store > creates-adds
TodoStore.createAndAdd:My Todo1

 ✓ src/stores/__tests__/TodosStore.spec.ts (1)
 ❯ src/components/__tests__/TodoCreator.spec.ts (1)
   ❯ TodoCreator (1)
     × Mounts properly

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
 FAIL  src/components/__tests__/TodoCreator.spec.ts > TodoCreator > Mounts properly
TypeError: Cannot read properties of undefined (reading 'invalid')
 ❯ Proxy._sfc_render src/components/TodoCreator.vue:38:58
     37| <template>
     38|   <div class="input-wrap" :class="{ 'input-err': uiState.invalid }">
     39|     <input type="text" v-model="uiState.todoText" />
       |                          ^
     40|     <TodoButton @click="createTodo()" :isDisabled="uiState.invalid">Create</TodoButton>
     41|   </div>
 ❯ renderComponentRoot node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:812:16
 ❯ ReactiveEffect.componentUpdateFn [as fn] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5657:46
 ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:182:19
 ❯ instance.update node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5770:51
 ❯ setupRenderEffect node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5778:5
 ❯ mountComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5568:5
 ❯ processComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5521:9
 ❯ patch node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5007:11
 ❯ ReactiveEffect.componentUpdateFn [as fn] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5664:11

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯
 Test Files  1 failed | 1 passed (2)
      Tests  1 failed | 1 passed (2)
   Start at  17:25:48
   Duration  11.22s (transform 1.44s, setup 1ms, collect 3.26s, tests 102ms, environment 11.86s, prepare 2.53s)

[cexbrayat]

Hi @anborg

Can you provide us a small repro online with https://stackblitz.com/github/vuejs/create-vue-templates/tree/main/typescript-vitest?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts

It'll be easier for us to take a look and help you