test: add tests specifically for node 16

.github/workflows/ssr.yml

@@ -33,4 +33,5 @@ jobs:
         run: pnpm run build
 
       - name: 🧪 Test
-        run: pnpm run test:ssr
+        working-directory: docs/ssr-tests
+        run: node legacy.mjs

docs/ssr-tests/legacy.test.mjs

@@ -0,0 +1,22 @@
+/* eslint no-console: 0 */
+
+/**
+ * Renders the component to a string without tests as node 16 doesn't support all the built-in
+ * test utils.
+ * This ensures the component renders correctly and
+ */
+
+const assert = await import('node:assert');
+const { readFileSync } = await import('node:fs');
+const { join } = await import('node:path');
+
+const { renderToStaticMarkup } = await import('react-dom/server');
+
+const { render } = await import('./ssr.mjs');
+
+const snapshot = readFileSync(join('snapshots', 'render.snapshot.html'), 'utf8').replace('\n', '');
+const output = renderToStaticMarkup(render());
+
+console.info('Output:\n', output, '\n\nSnapshot:\n', snapshot);
+
+assert.strictEqual(output, snapshot);

docs/ssr-tests/snapshots/render.snapshot.html

@@ -0,0 +1 @@
+<div style="position:relative;overflow:hidden;touch-action:none;user-select:none;-khtml-user-select:none;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none" data-rcs="root"><img alt="Example 1" src="example-1.jpg" style="display:block;width:100%;height:100%;max-width:100%;box-sizing:border-box;object-fit:cover;object-position:center center" data-rcs="image"/><div style="position:absolute;top:0;left:0;width:100%;height:100%;user-select:none;will-change:clip-path, transition;-khtml-user-select:none;-moz-user-select:none;-webkit-user-select:none" data-rcs="clip-item"><img alt="Example 2" src="example-2.jpg" style="display:block;width:100%;height:100%;max-width:100%;box-sizing:border-box;object-fit:cover;object-position:center center" data-rcs="image"/></div><button aria-orientation="horizontal" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" data-rcs="handle-container" role="slider" style="position:absolute;top:0;height:100%;background:none;border:0;padding:0;pointer-events:all;appearance:none;-webkit-appearance:none;-moz-appearance:none;outline:0;transform:translate3d(-50%, 0, 0)"><div aria-label="Drag to move" class="__rcs-handle-root" style="display:flex;flex-direction:column;place-items:center;height:100%;cursor:ew-resize;pointer-events:none;color:#fff"><div class="__rcs-handle-line" style="flex-grow:1;height:100%;width:2px;background-color:currentColor;pointer-events:auto;box-shadow:0 0 7px rgba(0,0,0,.35)"></div><div class="__rcs-handle-button" style="display:grid;grid-auto-flow:column;gap:8px;place-content:center;flex-shrink:0;width:56px;height:56px;border-radius:50%;border-style:solid;border-width:2px;pointer-events:auto;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);box-shadow:0 0 7px rgba(0,0,0,.35)"><div class="__rcs-handle-arrow" style="width:0;height:0;border-top:8px solid transparent;border-right:10px solid;border-bottom:8px solid transparent"></div><div class="__rcs-handle-arrow" style="width:0;height:0;border-top:8px solid transparent;border-right:10px solid;border-bottom:8px solid transparent;transform:rotate(180deg)"></div></div><div class="__rcs-handle-line" style="flex-grow:1;height:100%;width:2px;background-color:currentColor;pointer-events:auto;box-shadow:0 0 7px rgba(0,0,0,.35)"></div></div></button></div>

docs/ssr-tests/ssr.mjs

@@ -0,0 +1,18 @@
+const { createElement } = await import('react');
+
+const { ReactCompareSlider, ReactCompareSliderImage } = await import('react-compare-slider');
+
+export const render = () => {
+  const root = createElement(ReactCompareSlider, {
+    itemOne: createElement(ReactCompareSliderImage, {
+      alt: 'Example 1',
+      src: 'example-1.jpg',
+    }),
+    itemTwo: createElement(ReactCompareSliderImage, {
+      alt: 'Example 2',
+      src: 'example-2.jpg',
+    }),
+  });
+
+  return root;
+};

docs/ssr-tests/ssr.test.mjs

@@ -6,23 +6,14 @@ const { describe, it } = await import('node:test');
 const React = await import('react');
 const { renderToStaticMarkup } = await import('react-dom/server');
 
-const { ReactCompareSlider, ReactCompareSliderImage } = await import('react-compare-slider');
+const { render } = await import('./ssr.mjs');
 
 describe('SSR', () => {
   it('should render without error', ({ mock }) => {
     const mockConsoleError = mock.method(console, 'error');
     const mockConsoleWarn = mock.method(console, 'warn');
 
-    const root = React.createElement(ReactCompareSlider, {
-      itemOne: React.createElement(ReactCompareSliderImage, {
-        alt: 'Example 1',
-        src: 'example-1.jpg',
-      }),
-      itemTwo: React.createElement(ReactCompareSliderImage, {
-        alt: 'Example 2',
-        src: 'example-2.jpg',
-      }),
-    });
+    const root = render();
 
     assert.strictEqual(React.isValidElement(root), true);
     assert.strictEqual(renderToStaticMarkup(root).includes('data-rcs="root"'), true);