@wix/zero-config-implementation 1.83.0 → 1.85.0

package/dist/index.d.ts

@@ -857,11 +857,10 @@ export declare function extractComponentManifest(componentPath: string, compiled
  *
  * @param componentPath - Path to the TypeScript source file
  * @param compiledEntryPath - Path to the built JS entry file of the component's package (e.g. dist/index.js)
- * @param options.onError - Called for each non-fatal extraction error as it occurs
  * @errors
  * - {@link NotFoundError} — Source file does not exist (phase: `compile`)
- * - {@link ParseError} — TypeScript config or component types could not be parsed (phase: `compile` | `extract`)
- * - {@link IoError} — Component loaded but render/extractors failed (phase: `render`)
+ * - {@link ParseError} — TypeScript config or component types could not be parsed (phase: `compile` | `css` | `extract`)
+ * - {@link IoError} — Module failed to load, export access threw, render failed, or CSS selector matching failed
  */
 export declare interface ExtractComponentManifestOptions extends RunExtractorsOptions {
     onError?: (error: ExtractionError) => void;
@@ -909,7 +908,6 @@ declare type ExtractErrTypes<T extends readonly Result<unknown, unknown>[]> = {
     [idx in keyof T]: T[idx] extends Result<unknown, infer E> ? E : never;
 };
 
-/** A non-fatal issue encountered during component extraction. */
 export declare interface ExtractionError {
     componentName: string;
     phase: 'render' | 'coupling' | 'css' | 'loader' | 'conversion';

package/dist/index.js

@@ -1,4 +1,4 @@
-import { B as t, D as e, E as o, I as n, N as c, P as l, R as i, a as p, V as E, b as m, c as x, d as f, e as d, f as u, h as C, i as I, j as k, k as y, l as A, m as D, n as P, o as R, p as h, q as B, r as M, s as T, t as b, w } from "./index-nLqobONA.js";
+import { B as t, D as e, E as o, I as n, N as c, P as l, R as i, a as p, V as E, b as m, c as x, d as f, e as d, f as u, h as C, i as I, j as k, k as y, l as A, m as D, n as P, o as R, p as h, q as B, r as M, s as T, t as b, w } from "./index-DBSnnglR.js";
 import "react";
 export {
   t as BaseError,

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.83.0",
+  "version": "1.85.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -82,5 +82,5 @@
       ]
     }
   },
-  "falconPackageHash": "f80ca8596a9188b6f45fa139c17ea7ed3637fceffaddcb566b22d2db"
+  "falconPackageHash": "57c46654a2a7b434be3282e37ce2fff52e061ef822797e00a88ba528"
 }

package/src/converters/to-editor-component.ts

@@ -11,6 +11,7 @@ import type {
 } from '@wix/react-component-schema'
 import { CSS_PROPERTIES, ELEMENTS } from '@wix/react-component-schema'
 import { camelCase } from 'case-anything'
+import { IoError } from '../errors'
 import { buildRefElementManifestKey } from '../extensions/ref-elements/path-utils'
 import type { RefElementMatch } from '../extensions/ref-elements/types'
 import type { ComponentInfoWithCss } from '../index'
@@ -66,8 +67,14 @@ function buildEditorElement(
   nearestCommonAncestorCustomProps: Map<string, Record<string, CssCustomPropertyItem>>,
 ): EditorElement {
   const rootElement = component.elements[0]
-  const childElements = rootElement?.children ?? []
-  const rootCustomProps = rootElement ? (nearestCommonAncestorCustomProps.get(rootElement.traceId) ?? {}) : {}
+  if (!rootElement) {
+    throw new IoError(
+      `Component "${component.componentName}" render produced no root element — null or text-only render`,
+      { props: { phase: 'render' } },
+    )
+  }
+  const childElements = rootElement.children
+  const rootCustomProps = nearestCommonAncestorCustomProps.get(rootElement.traceId) ?? {}
 
   const customClassTriggers = collectCustomClassTriggers(component)
 
@@ -149,9 +156,8 @@ function buildData(
     const defaultValue = prop.defaultValue?.kind !== 'unresolved' ? prop.defaultValue?.value : undefined
 
     const result = buildDataItem(prop, defaultValue, propUsages, prop.propPath)
-    if (result.isOk()) {
-      data[name] = result.value
-    }
+    if (result.isErr()) throw result.error
+    data[name] = result.value
   }
 
   return data

package/src/extraction-types.ts

@@ -1,6 +1,5 @@
 import type { BaseError } from './errors'
 
-/** A non-fatal issue encountered during component extraction. */
 export interface ExtractionError {
   componentName: string
   phase: 'render' | 'coupling' | 'css' | 'loader' | 'conversion'

package/src/index.css-imports-fatal.test.ts

@@ -0,0 +1,33 @@
+import path from 'node:path'
+import { beforeEach, expect, it, vi } from 'vitest'
+import { extractComponentManifestResult } from './index'
+
+vi.mock('./information-extractors/ts', async (importOriginal) => {
+  const original = await importOriginal<typeof import('./information-extractors/ts')>()
+  return {
+    ...original,
+    extractCssImports: vi.fn(),
+  }
+})
+
+const componentPath = path.resolve(
+  import.meta.dirname,
+  '../../../packages/example-components/src/components/FunctionComponent/component.tsx',
+)
+const compiledEntryPath = path.resolve(import.meta.dirname, '../../../packages/example-components/dist/index.js')
+
+it('throws ParseError when extractCssImports throws', async () => {
+  const { extractCssImports } = await import('./information-extractors/ts')
+  vi.mocked(extractCssImports).mockImplementation(() => {
+    throw new Error('simulated extractCssImports failure')
+  })
+
+  const result = await extractComponentManifestResult(componentPath, compiledEntryPath)
+
+  expect(result.isErr()).toBe(true)
+  if (result.isErr()) {
+    expect(result.error.name).toBe('ParseError')
+    expect(result.error.message).toContain('Failed to extract CSS import paths from')
+    expect(result.error.message).toContain('simulated extractCssImports failure')
+  }
+})

package/src/index.ts

@@ -1,6 +1,6 @@
 import { WixServicesWrapper } from '@wix/builder-services-wrapper'
 import type { EditorReactComponent } from '@wix/react-component-schema'
-import { Result, ResultAsync, errAsync, okAsync } from 'neverthrow'
+import { Result, ResultAsync } from 'neverthrow'
 import React, { type ComponentType } from 'react'
 
 import { toEditorReactComponent } from './converters'
@@ -15,7 +15,6 @@ import { extractCssImports, extractDefaultComponentInfo } from './information-ex
 import type { ComponentInfo } from './information-extractors/ts/types'
 import { processComponent } from './manifest-pipeline'
 import { findComponent, findDefaultComponent, loadModuleForExtraction } from './module-loader'
-import type { LoadModuleFailure } from './module-loader'
 import { compileTsFile } from './ts-compiler'
 
 const defaultWrapper = (Component: ComponentType<unknown>): ComponentType<unknown> => {
@@ -42,11 +41,10 @@ export interface ManifestResult {
  *
  * @param componentPath - Path to the TypeScript source file
  * @param compiledEntryPath - Path to the built JS entry file of the component's package (e.g. dist/index.js)
- * @param options.onError - Called for each non-fatal extraction error as it occurs
  * @errors
  * - {@link NotFoundError} — Source file does not exist (phase: `compile`)
- * - {@link ParseError} — TypeScript config or component types could not be parsed (phase: `compile` | `extract`)
- * - {@link IoError} — Component loaded but render/extractors failed (phase: `render`)
+ * - {@link ParseError} — TypeScript config or component types could not be parsed (phase: `compile` | `css` | `extract`)
+ * - {@link IoError} — Module failed to load, export access threw, render failed, or CSS selector matching failed
  */
 export interface ExtractComponentManifestOptions extends RunExtractorsOptions {
   onError?: (error: ExtractionError) => void
@@ -60,12 +58,6 @@ export function extractComponentManifestResult(
   ManifestResult,
   InstanceType<typeof NotFoundError> | InstanceType<typeof ParseError> | InstanceType<typeof IoError>
 > {
-  const errors: ExtractionError[] = []
-  const report = (error: ExtractionError): void => {
-    errors.push(error)
-    options?.onError?.(error)
-  }
-
   // Step 1: Compile TypeScript (fatal)
   return compileTsFile(componentPath)
     .andThen((program) => {
@@ -137,68 +129,42 @@ export function extractComponentManifestResult(
               wrapper,
             }
 
-            // Step 5: Load the compiled package module (non-fatal) - done after TS extraction
-            // so componentName is known when reporting failures
+            // Step 5: Load the compiled package module (fatal)
             return loadModuleForExtraction(compiledEntryPath, refElementContext.runtimeModules)
-              .map(({ cleanup, moduleExports }) => ({
-                loadComponent: (name: string) =>
-                  findComponent(moduleExports, name) ?? findDefaultComponent(moduleExports),
-                failure: null as LoadModuleFailure | null,
-                cleanup,
-              }))
-              .orElse((failure) =>
-                okAsync({
-                  loadComponent: () => null as ComponentType<unknown> | null,
-                  cleanup: async () => {},
-                  failure,
-                }),
-              )
-              .andThen(({ cleanup, failure, loadComponent }) => {
-                if (failure) {
-                  if (failure.esmError) {
-                    report({
-                      componentName,
-                      phase: 'loader',
-                      error: new IoError('ESM import failed', { cause: failure.esmError, props: { phase: 'loader' } }),
-                    })
-                  }
-                  report({
-                    componentName,
-                    phase: 'loader',
-                    error: new IoError('CJS require failed', { cause: failure.cjsError, props: { phase: 'loader' } }),
-                  })
-                }
+              .mapErr((failure) => {
+                const esmDetail = failure.esmError ? `ESM: ${failure.esmError.message}` : 'ESM: not attempted'
+                return new IoError(
+                  `Failed to load compiled bundle at "${compiledEntryPath}". ${esmDetail}. CJS: ${failure.cjsError.message}. Ensure the package is built before extraction.`,
+                  { cause: failure.cjsError, props: { phase: 'loader' } },
+                )
+              })
+              .andThen(({ cleanup, moduleExports }) => {
+                const loadComponent = (name: string): ComponentType<unknown> | null =>
+                  findComponent(moduleExports, name) ?? findDefaultComponent(moduleExports)
 
-                // Step 6: Extract CSS imports (non-fatal)
-                let cssImportPaths: string[] = []
-                const cssResult = Result.fromThrowable(extractCssImports, (thrown) => thrown)(program)
-                if (cssResult.isOk()) {
-                  cssImportPaths = cssResult.value
-                } else {
-                  const thrown = cssResult.error
-                  report({
-                    componentName,
-                    phase: 'css',
-                    error: new ParseError(
-                      `Failed to extract CSS imports: ${thrown instanceof Error ? thrown.message : String(thrown)}`,
-                      { cause: thrown instanceof Error ? thrown : undefined, props: { phase: 'css' } },
-                    ),
-                  })
+                const getCssImportPaths = (): string[] => {
+                  const cssResult = Result.fromThrowable(
+                    extractCssImports,
+                    (thrown) =>
+                      new ParseError(
+                        `Failed to extract CSS import paths from "${componentPath}": ${thrown instanceof Error ? thrown.message : String(thrown)}`,
+                        { cause: thrown instanceof Error ? thrown : undefined, props: { phase: 'css' } },
+                      ),
+                  )(program)
+                  if (cssResult.isErr()) throw cssResult.error
+                  return cssResult.value
                 }
 
-                // Step 7: Process the default-exported component
+                // Step 6+7: CSS extraction and component processing — both under the cleanup boundary
                 return ResultAsync.fromPromise(
                   processComponentWithCleanup(
                     componentInfo,
                     loadComponent,
-                    cssImportPaths,
-                    !!failure,
-                    report,
+                    getCssImportPaths,
                     optionsWithDefaults,
                     compiledEntryPath,
                     refElementContext,
                     cleanup,
-                    errors,
                   ),
                   normalizeComponentExtractionCleanupFailure,
                 )
@@ -224,22 +190,18 @@ function normalizeComponentExtractionCleanupFailure(thrown: unknown): InstanceTy
 async function processComponentWithCleanup(
   componentInfo: ComponentInfo,
   loadComponent: (name: string) => ComponentType<unknown> | null,
-  cssImportPaths: string[],
-  didModuleLoadFail: boolean,
-  report: (error: ExtractionError) => void,
+  getCssImportPaths: () => string[],
   options: ExtractComponentManifestOptions,
   compiledEntryPath: string,
   refElementContext: RefElementContext,
   cleanup: () => Promise<void>,
-  errors: ExtractionError[],
 ): Promise<ManifestResult> {
   try {
+    const cssImportPaths = getCssImportPaths()
     const processResult = processComponent(
       componentInfo,
       loadComponent,
       cssImportPaths,
-      didModuleLoadFail,
-      report,
       options,
       compiledEntryPath,
       refElementContext.eligiblePaths,
@@ -248,10 +210,7 @@ async function processComponentWithCleanup(
       throw processResult.error
     }
 
-    return {
-      component: toEditorReactComponent(processResult.component),
-      errors,
-    }
+    return { component: toEditorReactComponent(processResult.component), errors: [] }
   } finally {
     await cleanup()
   }
@@ -292,8 +251,8 @@ export async function extractComponentManifest(
 
 // ── Tier 1: High-Level API ──────────────────────────────────────────────────
 // extractComponentManifest() is exported above as a named function declaration.
-export type { ExtractionError } from './extraction-types'
 export type { EditorReactComponent } from '@wix/react-component-schema'
+export type { ExtractionError } from './extraction-types'
 export type { ComponentInfoWithCss, ExtractedCssInfo, ProcessComponentResult } from './manifest-pipeline'
 
 // ── Tier 2: Pipeline Building Blocks ────────────────────────────────────────

package/src/information-extractors/css/parse.ts

@@ -125,56 +125,58 @@ function parseAllProperties(
   const propertiesMap = new Map<string, CSSProperty[]>()
   const varUsagesByProperty = new Map<string, Set<string>>()
 
-  try {
-    const ast = parse(cssString, { parseCustomProperty: true })
-
-    const valueAliases = parseValueAliases(ast)
-
-    walk(ast, {
-      visit: 'Rule',
-      enter(this: WalkContext, rule: Rule) {
-        try {
-          const properties: CSSProperty[] = []
-          for (const child of rule.block.children) {
-            if (child.type !== 'Declaration') continue
-            const extracted = extractProperty(child, varUsagesByProperty, valueAliases)
-            if (extracted) {
-              properties.push(extracted)
-            }
+  const ast = parse(cssString, {
+    parseCustomProperty: true,
+    parseAtrulePrelude: false,
+    onParseError: (error) => {
+      throw error
+    },
+  })
+
+  const valueAliases = parseValueAliases(ast)
+
+  walk(ast, {
+    visit: 'Rule',
+    enter(this: WalkContext, rule: Rule) {
+      try {
+        const properties: CSSProperty[] = []
+        for (const child of rule.block.children) {
+          if (child.type !== 'Declaration') continue
+          const extracted = extractProperty(child, varUsagesByProperty, valueAliases)
+          if (extracted) {
+            properties.push(extracted)
           }
+        }
 
-          if (properties.length === 0) return
+        if (properties.length === 0) return
 
-          const selectorStrings: string[] = []
+        const selectorStrings: string[] = []
 
-          if (isInsideKeyframes(this)) {
-            const keyframeName = this.atrule?.prelude ? generate(this.atrule.prelude).trim() : ''
-            if (!keyframeName) return
+        if (isInsideKeyframes(this)) {
+          const keyframeName = this.atrule?.prelude ? generate(this.atrule.prelude).trim() : ''
+          if (!keyframeName) return
 
-            const keyframeSelector = generate(rule.prelude).trim()
-            selectorStrings.push(`@keyframes ${keyframeName} ${keyframeSelector}`)
-          } else {
-            if (rule.prelude.type !== 'SelectorList') return
-            for (const selectorNode of rule.prelude.children) {
-              if (selectorNode.type !== 'Selector') continue
-              const selectorString = generate(selectorNode)
-              parsedSelectors.set(selectorString, selectorNode)
-              selectorStrings.push(selectorString)
-            }
+          const keyframeSelector = generate(rule.prelude).trim()
+          selectorStrings.push(`@keyframes ${keyframeName} ${keyframeSelector}`)
+        } else {
+          if (rule.prelude.type !== 'SelectorList') return
+          for (const selectorNode of rule.prelude.children) {
+            if (selectorNode.type !== 'Selector') continue
+            const selectorString = generate(selectorNode)
+            parsedSelectors.set(selectorString, selectorNode)
+            selectorStrings.push(selectorString)
           }
+        }
 
-          for (const selectorString of selectorStrings) {
-            const existing = propertiesMap.get(selectorString) ?? []
-            propertiesMap.set(selectorString, [...existing, ...properties])
-          }
-        } catch {
-          // Skip rules that can't be processed
+        for (const selectorString of selectorStrings) {
+          const existing = propertiesMap.get(selectorString) ?? []
+          propertiesMap.set(selectorString, [...existing, ...properties])
         }
-      },
-    })
-  } catch (error) {
-    console.error('CSS parsing error:', error)
-  }
+      } catch {
+        // Skip rules that can't be processed
+      }
+    },
+  })
 
   return { propertiesMap, varUsagesByProperty }
 }
@@ -506,33 +508,34 @@ function extractAtruleDescriptors(block: CssNode): Map<string, string> {
 function parseRegisteredProperties(cssString: string): Map<string, RegisteredCustomProperty> {
   const registered = new Map<string, RegisteredCustomProperty>()
 
-  try {
-    const ast = parse(cssString)
-
-    walk(ast, {
-      visit: 'Atrule',
-      enter(atrule: Atrule) {
-        if (atrule.name !== 'property' || !atrule.prelude || !atrule.block) return
-
-        const varName = generate(atrule.prelude).trim()
-        if (!varName.startsWith('--')) return
-
-        const descriptors = extractAtruleDescriptors(atrule.block)
-        const resolved = cssPropertyTypeFromSyntax(descriptors.get('syntax') ?? '*')
-        if (!resolved) return
-        const { cssPropertyType, enumOptions } = resolved
-        const initialValue = descriptors.get('initial-value')
-
-        registered.set(varName, {
-          cssPropertyType,
-          ...(enumOptions && { enumOptions }),
-          ...(initialValue !== undefined && { defaultValue: initialValue }),
-        })
-      },
-    })
-  } catch (error) {
-    console.error('CSS @property parsing error:', error)
-  }
+  const ast = parse(cssString, {
+    parseAtrulePrelude: false,
+    onParseError: (error) => {
+      throw error
+    },
+  })
+
+  walk(ast, {
+    visit: 'Atrule',
+    enter(atrule: Atrule) {
+      if (atrule.name !== 'property' || !atrule.prelude || !atrule.block) return
+
+      const varName = generate(atrule.prelude).trim()
+      if (!varName.startsWith('--')) return
+
+      const descriptors = extractAtruleDescriptors(atrule.block)
+      const resolved = cssPropertyTypeFromSyntax(descriptors.get('syntax') ?? '*')
+      if (!resolved) return
+      const { cssPropertyType, enumOptions } = resolved
+      const initialValue = descriptors.get('initial-value')
+
+      registered.set(varName, {
+        cssPropertyType,
+        ...(enumOptions && { enumOptions }),
+        ...(initialValue !== undefined && { defaultValue: initialValue }),
+      })
+    },
+  })
 
   return registered
 }
@@ -662,47 +665,48 @@ function analyzeStateSelector(selector: Selector): AnalyzedCompound[] {
 function parseStateClasses(cssString: string): StateClassRule[] {
   const results: StateClassRule[] = []
 
-  try {
-    const ast = parse(cssString)
-
-    walk(ast, {
-      visit: 'Rule',
-      enter(rule: Rule) {
-        if (rule.prelude.type !== 'SelectorList') return
-
-        const pseudoByBase = new Map<string, NativePseudoClass>()
-        const modifiersByBase = new Map<string, Set<string>>()
-
-        for (const selectorNode of rule.prelude.children) {
-          if (selectorNode.type !== 'Selector') continue
-          for (const analyzed of analyzeStateSelector(selectorNode)) {
-            if (analyzed.pseudoClass && !pseudoByBase.has(analyzed.base)) {
-              pseudoByBase.set(analyzed.base, analyzed.pseudoClass)
-            }
-            if (analyzed.modifiers.length > 0) {
-              const modifiers = modifiersByBase.get(analyzed.base) ?? new Set<string>()
-              for (const modifier of analyzed.modifiers) modifiers.add(modifier)
-              modifiersByBase.set(analyzed.base, modifiers)
-            }
+  const ast = parse(cssString, {
+    parseAtrulePrelude: false,
+    onParseError: (error) => {
+      throw error
+    },
+  })
+
+  walk(ast, {
+    visit: 'Rule',
+    enter(rule: Rule) {
+      if (rule.prelude.type !== 'SelectorList') return
+
+      const pseudoByBase = new Map<string, NativePseudoClass>()
+      const modifiersByBase = new Map<string, Set<string>>()
+
+      for (const selectorNode of rule.prelude.children) {
+        if (selectorNode.type !== 'Selector') continue
+        for (const analyzed of analyzeStateSelector(selectorNode)) {
+          if (analyzed.pseudoClass && !pseudoByBase.has(analyzed.base)) {
+            pseudoByBase.set(analyzed.base, analyzed.pseudoClass)
+          }
+          if (analyzed.modifiers.length > 0) {
+            const modifiers = modifiersByBase.get(analyzed.base) ?? new Set<string>()
+            for (const modifier of analyzed.modifiers) modifiers.add(modifier)
+            modifiersByBase.set(analyzed.base, modifiers)
           }
         }
+      }
 
-        for (const [baseSelector, modifiers] of modifiersByBase) {
-          const basePseudo = pseudoByBase.get(baseSelector)
-          for (const modifier of modifiers) {
-            // A modifier is the editor-trigger class for a NATIVE state only when its
-            // own state name matches the base's pseudo (`x--hover` ↔ `:hover`). A custom
-            // modifier sharing a base with a native pseudo (`x--selected` next to `:hover`)
-            // stays custom — it must not inherit the unrelated pseudo.
-            const pseudoClass = basePseudo && stateNameFromModifier(modifier) === basePseudo ? basePseudo : undefined
-            results.push({ baseSelector, modifier, pseudoClass })
-          }
+      for (const [baseSelector, modifiers] of modifiersByBase) {
+        const basePseudo = pseudoByBase.get(baseSelector)
+        for (const modifier of modifiers) {
+          // A modifier is the editor-trigger class for a NATIVE state only when its
+          // own state name matches the base's pseudo (`x--hover` ↔ `:hover`). A custom
+          // modifier sharing a base with a native pseudo (`x--selected` next to `:hover`)
+          // stays custom — it must not inherit the unrelated pseudo.
+          const pseudoClass = basePseudo && stateNameFromModifier(modifier) === basePseudo ? basePseudo : undefined
+          results.push({ baseSelector, modifier, pseudoClass })
         }
-      },
-    })
-  } catch (error) {
-    console.error('CSS state-class parsing error:', error)
-  }
+      }
+    },
+  })
 
   return results
 }

package/src/manifest-pipeline.css-match-fatal.test.ts

@@ -0,0 +1,41 @@
+import fs from 'node:fs'
+import React from 'react'
+import { beforeEach, expect, it, vi } from 'vitest'
+import { processComponent } from './manifest-pipeline'
+
+vi.mock('./information-extractors/css', async (importOriginal) => {
+  const original = await importOriginal<typeof import('./information-extractors/css')>()
+  return {
+    ...original,
+    matchCssSelectors: vi.fn(),
+  }
+})
+
+vi.mock('node:fs', async (importOriginal) => {
+  const original = await importOriginal<typeof import('node:fs')>()
+  return { ...original, default: { ...original, readFileSync: vi.fn() } }
+})
+
+beforeEach(() => {
+  vi.mocked(fs.readFileSync).mockReturnValue('.root { color: red; }')
+})
+
+it('returns ok:false with IoError when matchCssSelectors throws', async () => {
+  const { matchCssSelectors } = await import('./information-extractors/css')
+  vi.mocked(matchCssSelectors).mockImplementation(() => {
+    throw new Error('simulated selector matching failure')
+  })
+
+  const SimpleComponent: React.FC<unknown> = () => React.createElement('div', { className: 'root' }, 'hello')
+
+  const result = processComponent({ componentName: 'SimpleComponent', props: {} }, () => SimpleComponent, [
+    '/fake/style.css',
+  ])
+
+  expect(result.ok).toBe(false)
+  if (!result.ok) {
+    expect(result.error.name).toBe('IoError')
+    expect(result.error.message).toContain('CSS selector matching failed for "SimpleComponent"')
+    expect(result.error.message).toContain('simulated selector matching failure')
+  }
+})