Skip to content

test(ssr): add SSR and hydration tests for 'getServerSnapshot' #1209

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
sukvvon wants to merge 4 commits into
base: main
Choose a base branch
from
+84 −0
Draft

test(ssr): add SSR and hydration tests for 'getServerSnapshot' #1209

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f1ddb98
test(basic): add test for 'getServerSnapshot' with 'renderToString'
sukvvon Mar 7, 2026
49104ce
test(ssr): move SSR test to separate 'ssr.test.tsx' file
sukvvon Mar 7, 2026
3aea407
test(ssr): rename test description and add test for latest snapshot a…
sukvvon Mar 7, 2026
a5c4d42
test(ssr): add hydration mismatch test for 'getServerSnapshot' valida…
sukvvon Mar 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions tests/basic.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { StrictMode, useEffect, useLayoutEffect, useState } from 'react'
import { act, fireEvent, render, screen } from '@testing-library/react'
import { renderToString } from 'react-dom/server'
Comment thread
sukvvon marked this conversation as resolved.
Outdated
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { proxy, snapshot, useSnapshot } from 'valtio'
import { useCommitCount } from './utils'
Expand All @@ -13,6 +14,24 @@ describe('basic', () => {
vi.useRealTimers()
})

it('should return snapshot via getServerSnapshot with renderToString', () => {
const obj = proxy({ count: 0 })

const Counter = () => {
const snap = useSnapshot(obj)
return <div>count: {snap.count}</div>
}

const view = renderToString(
<StrictMode>
<Counter />
</StrictMode>,
)

expect(view).toContain('count:')
expect(view).toContain('0')
Copy link
Copy Markdown
Member

@dai-shi dai-shi Mar 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this test still passes even if we remove getServerSnapshot.

Copy link
Copy Markdown
Contributor Author

@sukvvon sukvvon Mar 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dai-shi I verified by removing getServerSnapshot — the test fails with Missing getServerSnapshot, which is required for server-rendered content. So renderToString does invoke getServerSnapshot, and this test validates its presence.

Copy link
Copy Markdown
Member

@dai-shi dai-shi Mar 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, but this test doesn't cover the behavior of getServerSnapshot. For example, if we have the getServerSnapshot implementation identical to that of getSnapshot, the test may pass.

Copy link
Copy Markdown
Contributor Author

@sukvvon sukvvon Mar 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dai-shi You're right — this test doesn't distinguish the behavior of getServerSnapshot from getSnapshot. However, it serves as a regression test to ensure getServerSnapshot is provided, since renderToString throws if it's missing. I also added a test (3aea407) that verifies the latest snapshot is returned after proxy state changes.

Copy link
Copy Markdown
Contributor Author

@sukvvon sukvvon Mar 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dai-shi Added a hydration mismatch test (a5c4d42) that verifies getServerSnapshot prevents hydration error by rendering with renderToString and hydrating with hydrateRoot, asserting no console.error is called.

})

it('simple counter', async () => {
const obj = proxy({ count: 0 })

Expand Down
Loading