Überprüfen von benutzerdefinierten Events und asynchronem State mit Vitest und Vue Test Utils

import { mount, flushPromises } from '@vue/test-utils';
import { describe, it, expect, vi } from 'vitest';
import AsyncSubmitButton from './AsyncSubmitButton.vue';
 
describe('AsyncSubmitButton.vue', () => {
  it('emits success payload after asynchronous operation resolves', async () => {
    const mockApi = vi.fn().mockResolvedValue({ status: 200, id: 'tx-99' });
    const wrapper = mount(AsyncSubmitButton, {
      props: { actionHandler: mockApi }
    });
 
    const button = wrapper.find('button');
    await button.trigger('click');
 
    expect(button.attributes('disabled')).toBeDefined();
    await flushPromises();
 
    expect(mockApi).toHaveBeenCalledTimes(1);
    expect(wrapper.emitted('completed')).toBeTruthy();
    expect(wrapper.emitted('completed')?.[0]).toEqual([{ status: 200, id: 'tx-99' }]);
    expect(button.attributes('disabled')).toBeUndefined();
  });
});