vue test utils - тестирование emit события

Компонент:

<template>
  <button @click="sendData">Отправить</button>
</template>

<script setup>
const emit = defineEmits(['dataSent']);

const sendData = () => {
  emit('dataSent', { id: 1, name: 'Тест' });
};
</script>

emitted()

Описание: Возвращает объект со всеми событиями, которые были вызваны компонентом.

Когда использовать: Для проверки, что компонент правильно "эмитит" события.

Пример использования: expect(wrapper.emitted('dataSent')).toBeTruthy()

toBeTruthy

— это метод проверки (assertion) в Vitest (или Jest), который вы можете использовать при тестировании Vue-компонентов с помощью @vue/test-utils. Он не специфичен для Vue, но часто используется в тестах.

Что делает toBeTruthy()?

Он проверяет, что полученное значение является "истинным" (truthy) в JavaScript. Это означает, что оно не является одним из "ложных" (falsy) значений:

• false
• 0
• -0
• 0n (BigInt)
• "" (пустая строка)
• null
• undefined
• NaN

Задание:

Проверьте, что при клике на кнопку компонент эмитит событие dataSent с объектом { id: 1, name: 'Тест' }.

import { mount } from '@vue/test-utils';
import { describe, it } from 'vitest';
import Emit from '@/components/Emit.vue';

describe('Emit.vue', () => {
    it('при клике на кнопку компонент эмитит событие dataSent', async () => {
        const wrapper = mount(Emit);
        await wrapper.find('button').trigger('click');

        expect(wrapper.emitted('dataSent')).toBeTruthy();
        expect(wrapper.emitted('dataSent')[0]).toEqual([{ id: 1, name: 'Тест' }])
    });
})

Во второй проверке - expect(wrapper.emitted('dataSent')[0]).toEqual([{ id: 1, name: 'Тест' }]), toBe не сработает, так как мы сравниваем 2 разных массива, и это разные ячейки памяти.