Snippet

Überprüfen des anfänglichen Zählertexts mit Vue Test Utils

Das Testen von Komponenten stellt sicher, dass Rendering und Schnittstellen wie erwartet funktionieren. Mit der mount-Funktion der Vue Test Utils und Vitest lässt sich eine Komponente mit definierten Props erzeugen, gezielt nach DOM-Elementen suchen und deren Textinhalt überprüfen.

snippet.js

javascript

import { mount } from '@vue/test-utils';
import { describe, it, expect } from 'vitest';
import CounterDisplay from './CounterDisplay.vue';
 
describe('CounterDisplay.vue', () => {
  it('renders the initial count passed via props', () => {
    const wrapper = mount(CounterDisplay, {
      props: {
        initialCount: 5
      }
    });
 
    const countSpan = wrapper.find('[data-test="count-value"]');
    expect(countSpan.exists()).toBe(true);
    expect(countSpan.text()).toBe('5');
  });
});

vue

Erklärung

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

Importiert die mount-Funktion, um eine Vue-Komponente in einer isolierten Testumgebung zu rendern.

const wrapper = mount(CounterDisplay, { props: { initialCount: 5 } });

Rendert die Zielkomponente und übergibt die initialCount-Prop als Testwert.

const countSpan = wrapper.find('[data-test="count-value"]');

Durchsucht den gerenderten DOM-Baum nach einem Element mit dem data-test-Attribut.

expect(countSpan.exists()).toBe(true);

Prüft, ob das gesuchte DOM-Element tatsächlich im Markup vorhanden ist.

expect(countSpan.text()).toBe('5');

Überprüft, ob der gerenderte Textinhalt exakt der Zeichenkette '5' entspricht.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Überprüfen des anfänglichen Zählertexts mit Vue Test Utils

Verwandt