test: use same test suite for modern and legacy node

.github/workflows/ssr.yml

@@ -27,11 +27,10 @@ jobs:
           cache: 'pnpm'
 
       - name: 📦 Install Dependencies
-        run: npm run bootstrap
+        run: corepack enable && pnpm install --frozen-lockfile --filter . --filter @this/ssr-tests
 
       - name: 🔨 Build
         run: pnpm run build
 
       - name: 🧪 Test
-        working-directory: docs/ssr-tests
-        run: node legacy.test.mjs
+        run: pnpm --filter @this/ssr-tests run test-legacy

.prettierignore

@@ -11,4 +11,3 @@ pnpm-lock.yaml
 storybook-static/
 .next/
 docs/storybook/src
-docs/ssr-tests/snapshots

docs/ssr-tests/package.json

@@ -8,10 +8,12 @@
   "type": "module",
   "license": "MIT",
   "scripts": {
-    "test": "rm -rf ./coverage && NODE_V8_COVERAGE='./coverage' node --experimental-test-coverage --test"
+    "test": "rm -rf ./coverage && NODE_V8_COVERAGE='./coverage' node --experimental-test-coverage --test",
+    "test-legacy": "node --test"
   },
   "devDependencies": {
     "@types/node": "^20.5.7",
+    "jest-mock": "^29.6.3",
     "react": "^18.2.0",
     "react-compare-slider": "latest",
     "react-dom": "^18.2.0"

docs/ssr-tests/ssr.test.mjs

@@ -1,25 +1,44 @@
 // @ts-check
 /* eslint no-console: 0 */
+
 const assert = await import('node:assert');
 const { describe, it } = await import('node:test');
 
-const React = await import('react');
+// Using `jest-mock` instead of built-in Node.js `mock` to allow this to run on node 16.
+const mock = await import('jest-mock');
+const { createElement, isValidElement } = await import('react');
 const { renderToStaticMarkup } = await import('react-dom/server');
 
-const { render } = await import('./ssr.mjs');
+const { ReactCompareSlider, ReactCompareSliderHandle, ReactCompareSliderImage, styleFitContainer } =
+  await import('react-compare-slider');
 
 describe('SSR', () => {
-  it('should render without error', ({ mock }) => {
-    const mockConsoleError = mock.method(console, 'error');
-    const mockConsoleWarn = mock.method(console, 'warn');
+  it('should render without error', () => {
+    const mockConsoleError = mock.spyOn(console, 'error');
+    const mockConsoleWarn = mock.spyOn(console, 'warn');
 
-    const root = render();
+    const root = createElement(ReactCompareSlider, {
+      handle: createElement(ReactCompareSliderHandle, {}),
+      itemOne: createElement(ReactCompareSliderImage, {
+        alt: 'Example 1',
+        src: 'example-1.jpg',
+        style: styleFitContainer({ objectPosition: 'left' }),
+      }),
+      itemTwo: createElement(ReactCompareSliderImage, {
+        alt: 'Example 2',
+        src: 'example-2.jpg',
+        style: styleFitContainer({ objectPosition: 'left' }),
+      }),
+    });
 
-    assert.strictEqual(React.isValidElement(root), true);
+    assert.strictEqual(isValidElement(root), true);
     assert.strictEqual(renderToStaticMarkup(root).includes('data-rcs="root"'), true);
     assert.strictEqual(renderToStaticMarkup(root).includes('src="example-1.jpg"'), true);
     assert.strictEqual(renderToStaticMarkup(root).includes('src="example-2.jpg"'), true);
     assert.strictEqual(mockConsoleError.mock.calls.length, 0);
     assert.strictEqual(mockConsoleWarn.mock.calls.length, 0);
+
+    mockConsoleError.mockRestore();
+    mockConsoleWarn.mockRestore();
   });
 });

package.json

@@ -30,7 +30,7 @@
   "engines": {
     "node": ">=16.0.0"
   },
-  "packageManager": "pnpm@8.7.0",
+  "packageManager": "pnpm@8.7.1",
   "sideEffects": false,
   "module": "dist/index.mjs",
   "types": "dist/index.d.mts",