diff --git a/tests/ssr.test.tsx b/tests/ssr.test.tsx new file mode 100644 index 0000000000..821bacdb79 --- /dev/null +++ b/tests/ssr.test.tsx @@ -0,0 +1,70 @@ +import React, { useEffect } from 'react' +import { act, screen } from '@testing-library/react' +import { renderToString } from 'react-dom/server' +import { describe, expect, it, vi } from 'vitest' +import { create } from 'zustand' + +interface BearStoreState { + bears: number +} + +interface BearStoreAction { + increasePopulation: () => void +} + +const initialState = { bears: 0 } +const useBearStore = create((set) => ({ + ...initialState, + increasePopulation: () => set(({ bears }) => ({ bears: bears + 1 })), +})) + +function Counter() { + const { bears, increasePopulation } = useBearStore( + ({ bears, increasePopulation }) => ({ + bears, + increasePopulation, + }) + ) + + useEffect(() => { + increasePopulation() + }, [increasePopulation]) + + return
bears: {bears}
+} + +describe.skipIf(!React.version.startsWith('18'))( + 'ssr behavior with react 18', + () => { + it('should handle different states between server and client correctly', async () => { + const { hydrateRoot } = await vi.importActual< + typeof import('react-dom/client') + >('react-dom/client') + + const markup = renderToString( + Loading...}> + + + ) + + const container = document.createElement('div') + document.body.appendChild(container) + container.innerHTML = markup + + expect(container.textContent).toContain('bears: 0') + + await act(async () => { + hydrateRoot( + container, + Loading...}> + + + ) + }) + + const bearCountText = await screen.findByText('bears: 1') + expect(bearCountText).not.toBeNull() + document.body.removeChild(container) + }) + } +)