Make profile SSR formatting deterministic

2026-08-29 20:24:38 +02:00
parent 872f420190
commit 99d94c9333
5 changed files with 86 additions and 4 deletions
@@ -0,0 +1,46 @@
+import React from 'react'
+import { hydrateRoot } from 'react-dom/client'
+import { renderToString } from 'react-dom/server'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../artwork/ArtworkGallery', () => ({
+  default: () => <div data-testid="mock-artwork-gallery" />,
+}))
+
+import TabArtworks from './TabArtworks'
+
+describe('TabArtworks SSR hydration formatting', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('hydrates formatted artwork statistics without recoverable mismatches', async () => {
+    vi.stubGlobal('fetch', vi.fn(async () => ({ ok: false })))
+    const props = {
+      artworks: [],
+      featuredArtworks: [{
+        id: 1,
+        name: 'Featured artwork',
+        views: 9529106,
+        likes: 1216,
+        downloads: 12,
+      }],
+      username: 'alice',
+      galleryUrl: '/@alice/artworks',
+    }
+    const container = document.createElement('div')
+    container.innerHTML = renderToString(<TabArtworks {...props} />)
+    document.body.appendChild(container)
+    const recoverableErrors = []
+
+    hydrateRoot(container, <TabArtworks {...props} />, {
+      onRecoverableError: (error) => recoverableErrors.push(error),
+    })
+
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    expect(recoverableErrors).toHaveLength(0)
+    expect(container.textContent).toContain('9,529,106')
+    expect(container.textContent).toContain('1,216')
+  })
+})