Как протестировать vue компонент на открытие модального окна через vitest?

Question

[Esm322]

Подскажите, пожалуйста, как можно протестировать на открытие модального окна в родительском компоненте? В родительском компоненте присутствует дочерний компонент с модальным окном, оно окрывается по условию v-if. Проблема заключается в том, что при написании теста и проверки на открытие всегда выдаёт ошибку, тест:

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

import { shallowMount } from '@vue/test-utils'

import { createTestingPinia } from '@pinia/testing'

import MainView from '@/views/MainView.vue'

describe('MainView.vue', () => {
  let wrapper: any

  const client = {
    id: 1,
    firstName: 'test',
    secondName: 'testov',
    thirdName: 'testovich',
    fullName: 'testov test testovich',
    date: {
      newDate: new Date(),
      nowDate: Date.now()
    },
    edit: {
      newEdit: new Date(),
      nowEdit: Date.now()
    },
    contacts: [
      {
        block: {
          name: 'component'
        },
        selectValue: '',
        inputValue: ''
      }
    ],
    newdCreateDate: 'today',
    newEditDate: 'today'
  }

  beforeEach(() => {
    wrapper = shallowMount(MainView, {
      global: {
        plugins: [
          createTestingPinia({
            createSpy: vi.fn,
            initialState: {
              client: {
                clientsData: [client]
              }
            }
          })
        ]
      }
    })
  })

  it('openning modal window add', async () => {
    expect(wrapper.find('.modal').exists()).toBe(false)
    await wrapper.find('#add').trigger('click')
    expect(wrapper.find('.modal').exists()).toBe(true)
  })
})

Часть родительского компонента:

//MainView.vue
<template>
  <ModalWindowAdd v-if="isModalAddVisible" :clients="useClients" />
</template>

<script setup lang="ts">
  const isModalAddVisible = ref(false);
</script>

В чём ошибка?

Answer 1

[Esm322]

Ошибка заключалась в shallowMount. Вместо shallowMount нужно было использовать mount, т.к shallowMount удаляет из родительского компонента дочерние компоненты и подставляет вместо них заглушки. Т.е тест должен был выглядеть так:

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

beforeEach(() => {
    wrapper = mount(MainView, {
      global: {
        plugins: [
          createTestingPinia({
            createSpy: vi.fn,
            initialState: {
              client: {
                clientsData: [client]
              }
            }
          })
        ]
      }
    })
  })

  it('openning modal window add', async () => {
    expect(wrapper.find('.modal').exists()).toBe(false)
    await wrapper.find('#add').trigger('click')
    expect(wrapper.find('.modal').exists()).toBe(true)
  })
})