how can know a specific class exist?

Question

I am using Vue 3 + vitest

I am writing a test for component

and I want to test that if a completed props value was true

then a div with class done should exist.

I have a problem with its syntax

import { describe, it, expect } from 'vitest'

import { mount } from '@vue/test-utils'
import ToDo from '../ToDo.vue'

describe('test button', () => {
  it('renders properly', () => {
    const wrapper = mount(ToDo, { props: { completed: true } })
    expect(wrapper.classes('.done')).toBeDefined()
       
  })
})

I have written this But it doesn't work correctly and always returns true.

this is component , I'm going to test it

<script setup lang="ts">

defineProps<{
  completed: boolean
}>()

</script>

<template>
  <div class="row">
    <button v-if="completed" class="done">done</button>

  </div>
</template>

how can I test this?

Answer 1

I found out that

describe('test button', () => {
  it('renders properly', () => {
    const wrapper = mount(ToDo, { props: { item: { id: 0, text: '', completed: false } } })
      expect(wrapper.find('button').classes('done')).toBe(true);
    
  })
})