Snippet

Prüfen ausgelöster Komponenten-Events mit Vue Test Utils

Das Testen von Schnittstellen umfasst die Überprüfung, ob Benutzerinteraktionen erwartete benutzerdefinierte Ereignisse mit korrekten Argumenten auslösen. Vue Test Utils stellt die `emitted()`-Methode bereit, die alle während des Komponentenlebenszyklus gesendeten Events aufzeichnet. Durch das Warten auf DOM-Trigger stellen Tests sicher, dass Mikrotasks und Watches abgearbeitet werden, bevor Nutzdaten geprüft werden.

snippet.js

javascript

import { mount } from '@vue/test-utils';
import CounterButton from './CounterButton.vue';
 
describe('CounterButton', () => {
  it('emits increment payload on user click', async () => {
    const wrapper = mount(CounterButton, {
      props: { step: 5 }
    });
 
    await wrapper.find('button').trigger('click');
 
    const emittedEvents = wrapper.emitted('increment');
    expect(emittedEvents).toHaveLength(1);
    expect(emittedEvents[0]).toEqual([5]);
  });
});

vue

Erklärung

const wrapper = mount(CounterButton, {

Erstellt die Zielkomponente in einer isolierten virtuellen DOM-Umgebung mit den angegebenen initialen Props.

await wrapper.find('button').trigger('click');

Findet das Button-Element, simuliert ein Klick-Ereignis und wartet den nachfolgenden Reaktionszyklus ab.

const emittedEvents = wrapper.emitted('increment');

Liest das Array aller aufgezeichneten Aufrufe für den Event-Namen 'increment' aus.

expect(emittedEvents[0]).toEqual([5]);

Überprüft, ob die erste Auslösung das erwartete Array an Argumenten als Nutzdaten übergeben hat.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Prüfen ausgelöster Komponenten-Events mit Vue Test Utils

Verwandt