test(sanity): update hydrate test (#6821)

sanity-io · May 31, 2024 · 0cefc21 · 0cefc21
1 parent 4487680
commit 0cefc21
Showing 1 changed file with 10 additions and 8 deletions.
diff --git a/packages/sanity/src/core/studio/Studio.test.tsx b/packages/sanity/src/core/studio/Studio.test.tsx
@@ -18,6 +18,8 @@ import {describe, expect, it, jest} from '@jest/globals'
  * c) https://styled-components.com/docs/advanced#server-side-rendering
  */
 import {type SanityClient} from '@sanity/client'
+import {act} from 'react'
+import {hydrateRoot} from 'react-dom/client'
 import {renderToStaticMarkup, renderToString} from 'react-dom/server'
 import {ServerStyleSheet} from 'styled-components'
 
@@ -40,11 +42,7 @@ describe('Studio', () => {
     const spy = jest.spyOn(console, 'error')
     const sheet = new ServerStyleSheet()
     try {
-      const html = renderToStaticMarkup(sheet.collectStyles(<Studio config={config} />))
-
-      expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-iUHVUy dIrkSA\\"><div data-ui=\\"Spinner\\" class=\\"sc-dAlxHm iMZvQo sc-cPiJYC ifYoiP sc-cbekWb eDknqs\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
-      )
+      renderToStaticMarkup(sheet.collectStyles(<Studio config={config} />))
     } finally {
       sheet.seal()
     }
@@ -56,12 +54,16 @@ describe('Studio', () => {
   })
   it(`SSR to markup for hydration doesn't throw`, () => {
     const spy = jest.spyOn(console, 'error')
+    const node = document.createElement('div')
+    document.body.appendChild(node)
+
     const sheet = new ServerStyleSheet()
     try {
       const html = renderToString(sheet.collectStyles(<Studio config={config} />))
-      expect(html).toMatchInlineSnapshot(
-        `"<div class=\\"sc-iUHVUy dIrkSA\\"><div data-ui=\\"Spinner\\" class=\\"sc-dAlxHm iMZvQo sc-cPiJYC ifYoiP sc-cbekWb eDknqs\\"><span><svg data-sanity-icon=\\"spinner\\" width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 25 25\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M4.5 12.5C4.5 16.9183 8.08172 20.5 12.5 20.5C16.9183 20.5 20.5 16.9183 20.5 12.5C20.5 8.08172 16.9183 4.5 12.5 4.5\\" stroke=\\"currentColor\\" stroke-width=\\"1.2\\" stroke-linejoin=\\"round\\"></path></svg></span></div></div>"`,
-      )
+      node.innerHTML = html
+
+      document.head.innerHTML += sheet.getStyleTags()
+      act(() => hydrateRoot(node, <Studio config={config} />))
     } finally {
       sheet.seal()
     }