Snippet

Verifizierung des reaktiven Composable-Lebenszyklus in Synthetischen Mount-Kontexten

Vue-Composables, die auf Lebenszyklus-Hooks wie `onMounted` oder `onUnmounted` angewiesen sind, benötigen eine aktive Komponenteninstanz. Das Kapseln des Aufrufs in einer synthetischen Inline-Komponente ermöglicht das präzise Testen von Cleanup-Effekten.

snippet.js

javascript

import { mount } from '@vue/test-utils';
 
function mountComposable(composableFn) {
  let result;
  const TestComponent = {
    setup() {
      result = composableFn();
      return () => null;
    }
  };
  const wrapper = mount(TestComponent);
  return { result, unmount: () => wrapper.unmount() };
}
 
export { mountComposable };

vue

Erklärung

setup() {

Führt das Ziel-Composable innerhalb eines aktiven Vue-Komponenten-Setup-Kontexts aus.

return () => null;

Gibt eine leere Render-Funktion zurück, um Overhead zu vermeiden und valide Semantik zu bewahren.

return { result, unmount: () => wrapper.unmount() };

Stellt die Rückgabewerte des Composables und den Unmount-Trigger für Cleanup-Hooks bereit.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Verifizierung des reaktiven Composable-Lebenszyklus in Synthetischen Mount-Kontexten

Verwandt