fix snapshot rendering

packages/jest-fela-bindings/src/createSnapshotFactory.js

@@ -18,7 +18,7 @@ function formatHTML(html) {
 
 export default function createSnapshotFactory(
   createElement,
-  render,
+  renderToMarkup,
   defaultRenderer,
   defaultRendererProvider,
   defaultThemeProvider
@@ -30,22 +30,17 @@ export default function createSnapshotFactory(
     RendererProvider = defaultRendererProvider,
     ThemeProvider = defaultThemeProvider
   ) {
-    const div = document.createElement('div')
-
     // reset renderer to have a clean setup
     renderer.clear()
 
-    render(
+    const markup = renderToMarkup(
       createElement(
         RendererProvider,
         { renderer },
         createElement(ThemeProvider, { theme }, component)
-      ),
-      div
+      )
     )
 
-    return `${formatCSS(renderToString(renderer))}\n\n${formatHTML(
-      div.innerHTML
-    )}`
+    return `${formatCSS(renderToString(renderer))}\n\n${formatHTML(markup)}`
   }
 }

packages/jest-inferno-fela/src/createSnapshot.js

@@ -5,9 +5,17 @@ import { RendererProvider, ThemeProvider } from 'inferno-fela'
 
 import { createSnapshotFactory } from 'jest-fela-bindings'
 
+function renderToMarkup(component) {
+  const div = document.createElement('div')
+
+  render(component, div)
+
+  return div.innerHTML
+}
+
 export default createSnapshotFactory(
   createElement,
-  render,
+  renderToMarkup,
   createRenderer(),
   RendererProvider,
   ThemeProvider

packages/jest-preact-fela/src/createSnapshot.js

@@ -4,9 +4,17 @@ import { RendererProvider, ThemeProvider } from 'preact-fela'
 
 import { createSnapshotFactory } from 'jest-fela-bindings'
 
+function renderToMarkup(component) {
+  const div = document.createElement('div')
+
+  render(component, div)
+
+  return div.innerHTML
+}
+
 export default createSnapshotFactory(
   createElement,
-  render,
+  renderToMarkup,
   createRenderer(),
   RendererProvider,
   ThemeProvider

packages/jest-react-fela/src/createSnapshot.js

@@ -1,28 +1,12 @@
 import { createElement } from 'react'
-import { render } from 'react-dom'
+import { renderToStaticMarkup } from 'react-dom/server'
 import { createRenderer } from 'fela'
 import { RendererProvider, ThemeProvider } from 'react-fela'
 
 import { createSnapshotFactory } from 'jest-fela-bindings'
 
-let createRoot
-try {
-  const ReactDOMClient = require('react-dom/client')
-  if (
-    typeof ReactDOMClient !== 'undefined' &&
-    typeof ReactDOMClient.createRoot !== 'undefined'
-  ) {
-    createRoot = ReactDOMClient.createRoot
-  }
-} catch (e) {}
-
-function renderComponent(component, node) {
-  if (createRoot) {
-    const root = createRoot(node)
-    root.render(component)
-  } else {
-    render(component, node)
-  }
+function renderToMarkup(component) {
+  return renderToStaticMarkup(component)
 }
 
 export default createSnapshotFactory(