test: react-plot on server side (#458)

package.json

@@ -68,6 +68,7 @@
     "@types/d3-shape": "^3.1.0",
     "@types/point-in-polygon": "^1.1.1",
     "@types/react": "^17.0.45",
+    "@types/react-dom": "^18.0.10",
     "@zakodium/eslint-config": "^6.0.0",
     "eslint": "^8.29.0",
     "isotopic-distribution": "^1.4.15",

tests/serverside.test.tsx

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import { ServerSide } from './utils';
+
+test('should render a plot in server-side mode', async ({ mount }) => {
+  const plot = await mount(<ServerSide />);
+  const html = await plot.innerHTML();
+  expect(html).toContain('svg');
+});

tests/utils.tsx

@@ -1,4 +1,5 @@
 import { ReactNode, useState } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
 
 import { Annotations, Plot, ScatterSeries } from '../src';
 import { Arrow } from '../src/components/Annotations/Arrow';
@@ -13,7 +14,10 @@ interface ChildrenProps {
 export function DefaultPlotTest({ children }: ChildrenProps) {
   return <Plot {...DEFAULT_PLOT_CONFIG}>{children}</Plot>;
 }
-
+export function ServerSide() {
+  const html = renderToStaticMarkup(<InfraredPlotTest />);
+  return <div dangerouslySetInnerHTML={{ __html: html }} />;
+}
 export function InfraredPlotTest({ children }: ChildrenProps) {
   return (
     <DefaultPlotTest>