javascript / expert
Snippet
Mocking von Custom-Element-Lebenszyklus-Registrierungen via Proxy-Objekte für React-DOM-Interop-Tests
Beim Testen von React-Komponenten, die Web Components / Custom Elements einbinden, ermöglicht das Einpacken der globalen CustomElementRegistry mit einem ES6-Proxy das Abfangen von Registrierungsaufrufen, die Prüfung von Klassenvererbungsinvarianten und das Ausführen von Test-Lebenszyklus-Hooks.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React from 'react';export function createCustomElementRegistryProxy(onRegister) {const targetRegistry = window.customElements;if (!targetRegistry) {throw new Error('CustomElementRegistry is missing from window environment.');}return new Proxy(targetRegistry, {get(target, prop, receiver) {if (prop === 'define') {return function (tagName, constructorClass, options) {if (!(constructorClass.prototype instanceof HTMLElement)) {throw new TypeError('Custom element constructor must extend HTMLElement.');}if (typeof onRegister === 'function') {onRegister(tagName, constructorClass);}return Reflect.apply(target.define, target, [tagName, constructorClass, options]);};}const value = Reflect.get(target, prop, receiver);return typeof value === 'function' ? value.bind(target) : value;}});}
react
Erklärung
1
if (!targetRegistry) {
Schützt vor Ausführung in Testlaufzeitumgebungen, denen das window.customElements-Objekt fehlt.
2
return new Proxy(targetRegistry, {
Konstruiert einen ES6-Proxy um das customElements-Objekt, um Zugriffe dynamisch abzufangen.
3
if (!(constructorClass.prototype instanceof HTMLElement)) {
Prüft den OOP-Vererbungskontrakt, um sicherzustellen, dass der Konstruktor von HTMLElement erbt.
4
return Reflect.apply(target.define, target, [tagName, constructorClass, options]);
Leitet den Methodenaufruf sicher an das originale Zielobjekt mit korrekten Parametern weiter.
5
return typeof value === 'function' ? value.bind(target) : value;
Bindet Methodenreferenzen zurück an das Zielobjekt, um Fehler bei ungültigem Aufrufkontext zu vermeiden.