Testing child components in Vue 3 with Vitest and Testing Library

I am implementing a small Vue3 app that guides the user through several steps by clicking next/previous button. I want to add tests that verify that the correct view/component is showing up after clicking on next/previous button.

  • There is no vue-router
  • I am using a Pinia store

At the moment I am using Vitest, vue-testing-libary and jest-dom to write the tests. I'm not sure if it is possible to accomplish my issue with these tools. If possible I don't want to use vue-test-utils because vue-testing-libary is build on top of it and seems to be the newer solution. Maybe I need to use Cypress?

<template>
  <div v-if="store.myCondition.length > 0">
    <FirstView v-if="store.step === 1"/>
    <SecondView v-if="store.step === 2"/>
    <ThirdView v-if="store.step === 3"/>
  </div>

  <div v-else>Loading ...</div>
</template>

Here is a dummy test that does nothing but printing the rendered HTML. In the rendered HTML there is no view rendered at all.

test('debug test', () => {
    screen.debug()
})
How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum