Migrate useWindowSize tests to @testing-library/react

package.json

@@ -98,6 +98,7 @@
 		"@storybook/theming": "^6.5.16",
 		"@swc/core": "^1.3.82",
 		"@swc/jest": "^0.2.29",
+		"@testing-library/react": "^14.0.0",
 		"@testing-library/react-hooks": "^8.0.1",
 		"@types/jest": "^29.5.4",
 		"@types/js-cookie": "^3.0.3",

src/__tests__/ssr-render-hook.tsx

@@ -0,0 +1,57 @@
+import type { PropsWithChildren } from 'react';
+import * as React from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import { renderToString } from 'react-dom/server';
+import { act } from 'react-dom/test-utils';
+
+type HookWrapper = (props: PropsWithChildren) => JSX.Element;
+
+type RenderHookOptions = {
+	wrapper?: HookWrapper;
+};
+
+type HookHarnessProps<Hook extends () => any> = {
+	readonly useHook: Hook;
+	readonly setResult: (result: ReturnType<Hook>) => void;
+};
+
+function HookHarness<Hook extends () => any>({ useHook, setResult }: HookHarnessProps<Hook>) {
+	setResult(useHook());
+
+	return null;
+}
+
+export const renderHookServer = <Hook extends () => any>(
+	useHook: Hook,
+	{ wrapper: Wrapper }: RenderHookOptions = {}
+): { result: { current: ReturnType<Hook> }; hydrate: () => void } => {
+	// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+	const result = { current: undefined } as { current: ReturnType<Hook> };
+
+	const setValue = (value: ReturnType<Hook>) => {
+		result.current = value;
+	};
+
+	let harness = <HookHarness useHook={useHook} setResult={setValue} />;
+
+	if (Wrapper) {
+		harness = <Wrapper>{harness}</Wrapper>;
+	}
+
+	// Render hook on server
+	const serverOutput = renderToString(harness);
+
+	// Render hook on client
+	const hydrate = () => {
+		const root = document.createElement('div');
+		root.innerHTML = serverOutput;
+		act(() => {
+			hydrateRoot(root, harness);
+		});
+	};
+
+	return {
+		result,
+		hydrate,
+	};
+};

src/useWindowSize/__tests__/dom.ts

@@ -1,6 +1,6 @@
-import { act, renderHook } from '@testing-library/react-hooks/dom';
+import { act, renderHook } from '@testing-library/react';
 import { useState } from 'react';
-import { useWindowSize, type WindowSize } from '../..';
+import { useWindowSize } from '../..';
 
 describe('useWindowSize', () => {
 	beforeEach(() => {
@@ -25,34 +25,29 @@ describe('useWindowSize', () => {
 	});
 
 	it('should render', () => {
-		const { result } = renderHook(() => useWindowSize());
-		expect(result.error).toBeUndefined();
+		expect(() => {
+			renderHook(() => useWindowSize());
+		}).not.toThrow();
 	});
 
 	it('should use provided state hook', () => {
 		const { result } = renderHook(() => useWindowSize(useState));
 
 		expect(result.current.width).toBe(100);
 		expect(result.current.height).toBe(100);
-		expect(result.all.length).toBe(1);
 
-		triggerResize('width', 200);
+		triggerResize('height', 200);
 		expect(result.current.width).toBe(200);
 		expect(result.current.height).toBe(100);
-		expect(result.all.length).toBe(2);
 
 		triggerResize('height', 200);
 		expect(result.current.width).toBe(200);
 		expect(result.current.height).toBe(200);
-		expect(result.all.length).toBe(3);
 	});
 
 	it('should delay measurement to effects stage if 2nd argument is `true`', () => {
 		const { result } = renderHook(() => useWindowSize(useState, true));
 
-		expect((result.all[0] as WindowSize).width).toBe(0);
-		expect((result.all[0] as WindowSize).height).toBe(0);
-
 		expect(result.current.width).toBe(100);
 		expect(result.current.height).toBe(100);
 	});

src/useWindowSize/__tests__/ssr.ts

@@ -1,13 +1,14 @@
-import { renderHook } from '@testing-library/react-hooks/server';
 import { useWindowSize } from '../..';
+import { renderHookServer } from '../../__tests__/ssr-render-hook';
 
 describe('useWindowSize', () => {
 	it('should be defined', () => {
 		expect(useWindowSize).toBeDefined();
 	});
 
 	it('should render', () => {
-		const { result } = renderHook(() => useWindowSize());
-		expect(result.error).toBeUndefined();
+		expect(() => {
+			renderHookServer(() => useWindowSize());
+		}).not.toThrow();
 	});
 });

tsconfig.json

@@ -10,7 +10,7 @@
       "ESNext",
       "DOM"
     ],
-    "jsx": "react",
+    "jsx": "react-jsx",
 		"allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "skipLibCheck": true