Replace react-test-renderer (#389)

* Replace react-test-renderer

* Remove addAccessibility calls

package.json

@@ -32,7 +32,6 @@
     "prettier": "^3.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-test-renderer": "^18.3.1",
     "rimraf": "^6.0.1",
     "typescript": "^5.7.2",
     "webpack": "^5.96.1",

packages/react-jsx-highcharts/test/components/XAxis/XAxis.spec.js

@@ -1,118 +1,97 @@
 import * as React from 'react';
-import TestRenderer from 'react-test-renderer';
+import Highcharts from 'highcharts/highstock';
+import 'highcharts/modules/accessibility';
 
-import XAxis from '../../../src/components/XAxis/XAxis';
-import Axis from '../../../src/components/Axis';
-import ChartContext from '../../../src/components/ChartContext';
-import { createMockProvidedChart } from '../../test-utils';
+import { render } from '@testing-library/react';
 
-describe('<XAxis />', () => {
-  let testContext;
-  let ProvidedAxis;
-  beforeEach(() => {
-    testContext = {};
-    const { chartStubs } = createMockProvidedChart({
-      type: 'chart'
-    });
-    testContext.chartStubs = chartStubs;
+import { HighchartsChart, HighchartsProvider, XAxis } from '../../../src';
+import ContextSpy from '../../ContextSpy';
 
-    ProvidedAxis = props => (
-      <ChartContext.Provider value={chartStubs}>
-        <XAxis {...props} />
-      </ChartContext.Provider>
-    );
-  });
+describe('<XAxis />', () => {
+  it('creates an chart xaxis', () => {
+    let chartRef = {};
+    const Component = () => {
+      return (
+        <HighchartsProvider Highcharts={Highcharts}>
+          <HighchartsChart>
+            <XAxis id="myAxis">
+              <ContextSpy chartRef={chartRef} />
+            </XAxis>
+          </HighchartsChart>
+        </HighchartsProvider>
+      );
+    };
 
-  it('renders an <Axis />', () => {
-    const wrapper = new TestRenderer.create(<ProvidedAxis />);
-    const axis = wrapper.root.findByType(Axis);
+    render(<Component />);
 
+    const axis = chartRef.current.object.get('myAxis');
     expect(axis).toBeDefined();
-  });
-
-  it('renders an <Axis isX />', () => {
-    const wrapper = new TestRenderer.create(<ProvidedAxis />);
-    const axis = wrapper.root.findByType(Axis);
-
-    expect(axis.props).toHaveProperty('isX', true);
+    expect(axis.isXAxis).toBeDefined();
   });
 
   it('passes other props through to <Axis />', () => {
-    const wrapper = new TestRenderer.create(<ProvidedAxis tickLength={1337} />);
-    const axis = wrapper.root.findByType(Axis);
-
-    expect(axis.props).toHaveProperty('tickLength', 1337);
-  });
-
-  describe('Highcharts chart', () => {
-    beforeEach(() => {
-      testContext.chartStubs.type = 'chart';
-    });
-
-    it('renders the <Axis /> type if provided', () => {
-      const wrapper = new TestRenderer.create(
-        <ProvidedAxis type="logarithmic" />
+    let chartRef = {};
+    const Component = () => {
+      return (
+        <HighchartsProvider Highcharts={Highcharts}>
+          <HighchartsChart>
+            <XAxis id="myAxis" tickLength={1337}>
+              <ContextSpy chartRef={chartRef} />
+            </XAxis>
+          </HighchartsChart>
+        </HighchartsProvider>
       );
-      const axis = wrapper.root.findByType(Axis);
+    };
 
-      expect(axis.props).toHaveProperty('type', 'logarithmic');
-    });
-
-    it('renders the an <Axis type="linear" /> if no type specified', () => {
-      const wrapper = new TestRenderer.create(<ProvidedAxis />);
-      const axis = wrapper.root.findByType(Axis);
-
-      expect(axis.props).toHaveProperty('type', 'linear');
-    });
+    render(<Component />);
 
-    it('uses the id prop if provided', () => {
-      const wrapper = new TestRenderer.create(<ProvidedAxis id="myXAxisId" />);
-      const axis = wrapper.root.findByType(Axis);
-
-      expect(axis.props).toHaveProperty('id', 'myXAxisId');
-    });
-
-    it('does not create an id if id prop not provided', () => {
-      const wrapper = new TestRenderer.create(<ProvidedAxis />);
-      const axis = wrapper.root.findByType(Axis);
-
-      expect(axis.props.id).not.toBeDefined();
-    });
+    const axis = chartRef.current.object.get('myAxis');
+    expect(axis).toBeDefined();
+    expect(axis.userOptions.tickLength).toBe(1337);
   });
 
-  describe('Highstock chart', () => {
-    beforeEach(() => {
-      testContext.chartStubs.type = 'stockChart';
-    });
-
+  describe('Highcharts chart', () => {
     it('renders the <Axis /> type if provided', () => {
-      const wrapper = new TestRenderer.create(
-        <ProvidedAxis type="logarithmic" />
-      );
-      const axis = wrapper.root.findByType(Axis);
-
-      expect(axis.props).toHaveProperty('type', 'logarithmic');
+      let chartRef = {};
+      const Component = () => {
+        return (
+          <HighchartsProvider Highcharts={Highcharts}>
+            <HighchartsChart>
+              <XAxis id="myAxis" type="logarithmic">
+                <ContextSpy chartRef={chartRef} />
+              </XAxis>
+            </HighchartsChart>
+          </HighchartsProvider>
+        );
+      };
+
+      render(<Component />);
+
+      const axis = chartRef.current.object.get('myAxis');
+      expect(axis).toBeDefined();
+      expect(axis.isXAxis).toBe(true);
+      expect(axis.userOptions.type).toBe('logarithmic');
     });
 
-    it('renders the an <Axis type="datetime" /> if no type specified', () => {
-      const wrapper = new TestRenderer.create(<ProvidedAxis />);
-      const axis = wrapper.root.findByType(Axis);
-
-      expect(axis.props).toHaveProperty('type', 'datetime');
-    });
-
-    it('uses the id `xAxis` even if an id prop is provided', () => {
-      const wrapper = new TestRenderer.create(<ProvidedAxis id="myXAxisId" />);
-      const axis = wrapper.root.findByType(Axis);
-
-      expect(axis.props).toHaveProperty('id', 'xAxis');
-    });
-
-    it('uses the id `xAxis` if id prop not provided', () => {
-      const wrapper = new TestRenderer.create(<ProvidedAxis />);
-      const axis = wrapper.root.findByType(Axis);
-
-      expect(axis.props).toHaveProperty('id', 'xAxis');
+    it('renders the an <Axis type="linear" /> if no type specified', () => {
+      let chartRef = {};
+      const Component = () => {
+        return (
+          <HighchartsProvider Highcharts={Highcharts}>
+            <HighchartsChart>
+              <XAxis id="myAxis">
+                <ContextSpy chartRef={chartRef} />
+              </XAxis>
+            </HighchartsChart>
+          </HighchartsProvider>
+        );
+      };
+
+      render(<Component />);
+
+      const axis = chartRef.current.object.get('myAxis');
+      expect(axis).toBeDefined();
+      expect(axis.userOptions.type).toBe('linear');
     });
   });
 });

packages/react-jsx-highstock/test/ContextSpy.js

@@ -0,0 +1,94 @@
+import { useEffect } from 'react';
+import {
+  useAxis,
+  useChart,
+  useHighcharts,
+  useSeries,
+  usePlotBandLine
+} from '../src';
+
+const ContextSpy = ({
+  axisId,
+  axisRef,
+  chartRef,
+  highchartsRef,
+  seriesRef,
+  plotBandLineRef
+}) => {
+  const axis = useAxis(axisId);
+  const chart = useChart();
+  const Highcharts = useHighcharts();
+  const series = useSeries();
+  const plotbandline = usePlotBandLine();
+
+  useEffect(() => {
+    if (highchartsRef) {
+      highchartsRef.current = Highcharts;
+    }
+
+    return () => {
+      if (highchartsRef) {
+        highchartsRef.current = null;
+      }
+    };
+  }, [Highcharts]);
+
+  useEffect(() => {
+    if (chartRef) {
+      chartRef.current = chart;
+    }
+
+    return () => {
+      if (chartRef) {
+        chartRef.current = null;
+      }
+    };
+  }, [chart]);
+
+  useEffect(() => {
+    if (axisRef) {
+      axisRef.current = axis;
+      axisRef.addPlotBandOrLineSpy = jest.spyOn(axis, 'addPlotBandOrLine');
+      axisRef.removePlotBandOrLineSpy = jest.spyOn(
+        axis,
+        'removePlotBandOrLine'
+      );
+    }
+
+    return () => {
+      if (axisRef) {
+        axisRef.addPlotBandOrLineSpy.mockRestore();
+        axisRef.removePlotBandOrLineSpy.mockRestore();
+        axisRef.current = null;
+      }
+    };
+  }, [axis]);
+
+  useEffect(() => {
+    if (seriesRef) {
+      seriesRef.current = series;
+    }
+
+    return () => {
+      if (seriesRef) {
+        seriesRef.current = null;
+      }
+    };
+  }, [series]);
+
+  useEffect(() => {
+    if (plotBandLineRef) {
+      plotBandLineRef.current = plotbandline;
+    }
+
+    return () => {
+      if (plotBandLineRef) {
+        plotBandLineRef.current = null;
+      }
+    };
+  }, [plotbandline]);
+
+  return null;
+};
+
+export default ContextSpy;