javascript / expert
Snippet
Deterministische Stack-Trace-Normalisierung für React-Error-Boundaries in Unittests
React Error Boundaries erzeugen umgebungsspezifische componentStack-Zeichenketten mit absoluten Dateipfaden. Die Normalisierung dieser Stack-Strings innerhalb von Testsuites ermöglicht deterministische Zusicherungstests über verschiedene Betriebssysteme und CI/CD-Runner-Dateisysteme hinweg.
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
27
28
29
30
import React from 'react';export function normalizeBoundaryStack(errorInfo) {if (!errorInfo || typeof errorInfo.componentStack !== 'string') {throw new TypeError('Invalid ComponentStack payload provided.');}const cleanLines = errorInfo.componentStack.split('\n').map(line => line.trim()).filter(Boolean).map(line => line.replace(/\(at .*\)/, '(at [normalized])'));return cleanLines.join('\n');}export class TestableErrorBoundary extends React.Component {state = { hasError: false, normalizedStack: null };componentDidCatch(error, errorInfo) {const stack = normalizeBoundaryStack(errorInfo);this.setState({ hasError: true, normalizedStack: stack });}render() {if (this.state.hasError) {return <pre data-testid="error-stack">{this.state.normalizedStack}</pre>;}return this.props.children;}}
react
Erklärung
1
if (!errorInfo || typeof errorInfo.componentStack !== 'string') {
Validiert den Typ des Eingabe-Payloads, um frühzeitig mit einem expliziten TypeError abzubrechen.
2
const cleanLines = errorInfo.componentStack
Spaltet den rohen React-Komponentenstack-String in einzelne Array-Elemente zur Zeilenverarbeitung auf.
3
.map(line => line.replace(/\(at .*\)/, '(at [normalized])'));
Entfernt lokale Verzeichnisstrukturen aus Stack-Traces mittels regulärer Ausdrücke für konsistente Snapshots.
4
componentDidCatch(error, errorInfo) {
Fängt nicht behandelte untergeordnete Fehler ab und übergibt Laufzeit-Tracedetails an die Normalisierungsfunktion.
5
return <pre data-testid="error-stack">{this.state.normalizedStack}</pre>;
Rendert den normalisierten Fehler-String in das DOM für robuste Test-Assertions.