Snippet

Unit-Testing von Composables mit EffectScope und isoliertem Lebenszyklus-Harness

Das Testen von Vue Composition API-Funktionen außerhalb von Komponentenbäumen führt oft zu Speicherlecks oder fehlerhaften Lebenszyklus-Registrierungen. Durch die Verwendung von Vue's effectScope API in einem Test-Harness-Helper läuft die Composable-Logik in einem dedizierten, isolierten reaktiven Scope. Dies ermöglicht es Unit-Test-Skripten, Zustandsänderungen direkt zu überprüfen und scope.stop() explizit aufzurufen.

snippet.js

javascript

import { effectScope, ref } from 'vue';
 
function withSetup(composable) {
  let result;
  const scope = effectScope();
  scope.run(() => {
    result = composable();
  });
  return [result, () => scope.stop()];
}
 
// Usage in Test:
const [state, stopScope] = withSetup(() => {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
});
 
state.increment();
console.assert(state.count.value === 1, 'Counter should increment');
stopScope();

vue

Erklärung

function withSetup(composable) {

Defines a generic harness function that encapsulates composable execution without mounting full DOM nodes.

const scope = effectScope();

Instanziiert einen isolierten reaktiven Effekt-Scope, der alle Computed Signals und Watcher erfassen kann.

scope.run(() => { result = composable(); });

Führt das Ziel-Composable im aktiven Effekt-Scope-Kontext aus, um reaktives Tracking herzustellen.

return [result, () => scope.stop()];

Gibt das Composable-Ergebnis zusammen mit einer expliziten Abbruchfunktion für das Cleanup in Tests zurück.

stopScope();

Beseitigt alle Watcher, Refs und Sub-Effekte innerhalb des Scopes, um Speicherlecks in Tests zu verhindern.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Unit-Testing von Composables mit EffectScope und isoliertem Lebenszyklus-Harness

Verwandt