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

Question

SilverSorceress

vue

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

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

4 мая 2024 г. 22:00

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для тестирования открытия модального окна в Vue компоненте с использованием Vitest, вам нужно использовать методы и функции Jest для проверки изменения состояния компонента.

Пример кода:

```Vue
<template>
  <div>
    <button @click="openModal">Open Modal</button>
    <ChildComponent v-if="modalOpen" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      modalOpen: false
    };
  },
  methods: {
    openModal() {
      this.modalOpen = true;
    }
  },
};
</script>
```

Для тестирования открытия модального окна в дочернем компоненте, вы можете использовать следующий код теста:

```javascript
import { mount } from '@vue/test-utils';
import ParentComponent from './ParentComponent.vue';
import ChildComponent from './ChildComponent.vue';

describe('ParentComponent', () => {
  it('opens modal on button click', async () => {
    const wrapper = mount(ParentComponent);
    
    // Проверяем, что модальное окно изначально не отображается
    expect(wrapper.findComponent(ChildComponent).exists()).toBe(false);
    
    // Находим кнопку и эмулируем клик
    wrapper.find('button').trigger('click');
    
    // Ждем следующего цикла событий, чтобы убедиться, что модальное окно отобразилось
    await wrapper.vm.$nextTick();
    
    // Проверяем, что модальное окно отображается
    expect(wrapper.findComponent(ChildComponent).exists()).toBe(true);
  });
});
```

Этот тест проверяет, что при нажатии кнопки "Open Modal" модальное окно отображается. Обратите внимание на использование `await wrapper.vm.$nextTick();` для ожидания следующего цикла событий после эмуляции клика на кнопку.

Если тест завершается ошибкой, возможно, стоит проверить правильность импортов компонентов и событий, которые вызывают отображение модального окна.

Answer 2

Ошибка заключалась в 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)
  })
})