diff --git a/packages/react-jsx-highmaps/test/components/HighchartsMapChart/HighchartsMapChart.spec.js b/packages/react-jsx-highmaps/test/components/HighchartsMapChart/HighchartsMapChart.spec.js
index 30085abd..c5477b95 100644
--- a/packages/react-jsx-highmaps/test/components/HighchartsMapChart/HighchartsMapChart.spec.js
+++ b/packages/react-jsx-highmaps/test/components/HighchartsMapChart/HighchartsMapChart.spec.js
@@ -1,22 +1,22 @@
 import React from 'react';
-import { BaseChart, HighchartsContext } from 'react-jsx-highcharts';
+
+jest.mock('react-jsx-highcharts', () => ({
+  ...jest.requireActual('react-jsx-highcharts'),
+  useHighcharts: jest.fn()
+}));
+
+import { useHighcharts, BaseChart } from 'react-jsx-highcharts';
 import { Highcharts, createMockChart } from '../../test-utils';
 import HighchartsMapChart from '../../../src/components/HighchartsMapChart/HighchartsMapChart';
 
 describe('<HighchartsMapChart />', () => {
   let testContext;
-  let ProvidedHighchartsMapChart;
 
   beforeEach(() => {
     testContext = {};
     const chart = createMockChart();
     Highcharts.mapChart.mockReturnValue(chart);
-
-    ProvidedHighchartsMapChart = props => (
-      <HighchartsContext.Provider value={Highcharts}>
-        <HighchartsMapChart {...props} />
-      </HighchartsContext.Provider>
-    )
+    useHighcharts.mockImplementation(() => Highcharts);
   });
 
   afterEach(() => {
@@ -24,32 +24,32 @@ describe('<HighchartsMapChart />', () => {
   });
 
   it('renders a <BaseChart />', () => {
-    const wrapper = mount(<ProvidedHighchartsMapChart />);
+    const wrapper = mount(<HighchartsMapChart />);
     expect(wrapper.find(BaseChart)).toExist();
   });
 
   it('renders a <BaseChart /> with the correct creation function', () => {
-    const wrapper = mount(<ProvidedHighchartsMapChart />);
+    const wrapper = mount(<HighchartsMapChart />);
      expect(wrapper.find(BaseChart)).toHaveProp('chartCreationFunc',Highcharts.mapChart);
   });
 
   it('renders a <BaseChart /> with the correct chart type', () => {
-    const wrapper = mount(<ProvidedHighchartsMapChart />);
+    const wrapper = mount(<HighchartsMapChart />);
      expect(wrapper.find(BaseChart)).toHaveProp('chartType','mapChart');
   });
 
   it('renders a <BaseChart /> with GeoJSON from a string', () => {
-    const wrapper = mount(<ProvidedHighchartsMapChart map='mock/map' />);
+    const wrapper = mount(<HighchartsMapChart map='mock/map' />);
      expect(wrapper.find(BaseChart)).toHaveProp('chart',{ map: { some: 'data' } });
   })
 
   it('renders a <BaseChart /> with direct GeoJSON', () => {
-    const wrapper = mount(<ProvidedHighchartsMapChart map={{ direct: 'input' }} />);
+    const wrapper = mount(<HighchartsMapChart map={{ direct: 'input' }} />);
      expect(wrapper.find(BaseChart)).toHaveProp('chart',{ map: { direct: 'input' } });
   })
 
   it('passes other props through to <BaseChart />', () => {
-    const wrapper = mount(<ProvidedHighchartsMapChart plotOptions={{ c: 'd' }} />);
+    const wrapper = mount(<HighchartsMapChart plotOptions={{ c: 'd' }} />);
      expect(wrapper.find(BaseChart)).toHaveProp('plotOptions',{ c: 'd' });
   });
 });
diff --git a/packages/react-jsx-highstock/test/components/HighchartsStockChart/HighchartsStockChart.spec.js b/packages/react-jsx-highstock/test/components/HighchartsStockChart/HighchartsStockChart.spec.js
index 513a49e3..8be3777b 100644
--- a/packages/react-jsx-highstock/test/components/HighchartsStockChart/HighchartsStockChart.spec.js
+++ b/packages/react-jsx-highstock/test/components/HighchartsStockChart/HighchartsStockChart.spec.js
@@ -1,39 +1,42 @@
 import React from 'react';
-import { BaseChart, HighchartsContext } from 'react-jsx-highcharts';
+
+jest.mock('react-jsx-highcharts', () => ({
+  ...jest.requireActual('react-jsx-highcharts'),
+  useHighcharts: jest.fn()
+}));
+
+import { useHighcharts, BaseChart } from 'react-jsx-highcharts';
 import { Highcharts, createMockChart } from '../../test-utils';
 import HighchartsStockChart from '../../../src/components/HighchartsStockChart/HighchartsStockChart';
 
 describe('<HighchartsStockChart />', () => {
-  let ProvidedHighchartsStockChart;
-
   beforeEach(() => {
     const chart = createMockChart();
     Highcharts.stockChart.mockReturnValue(chart);
 
-    ProvidedHighchartsStockChart = props => (
-      <HighchartsContext.Provider value={ Highcharts }>
-        <HighchartsStockChart {...props} />
-      </HighchartsContext.Provider>
-    )
+    useHighcharts.mockImplementation(() => Highcharts);
   });
 
   it('renders a <BaseChart />', () => {
-    const wrapper = mount(<ProvidedHighchartsStockChart />);
+    const wrapper = mount(<HighchartsStockChart />);
     expect(wrapper.find(BaseChart)).toExist();
   });
 
   it('renders a <BaseChart /> with the correct creation function', () => {
-    const wrapper = mount(<ProvidedHighchartsStockChart />);
-    expect(wrapper.find(BaseChart)).toHaveProp('chartCreationFunc', Highcharts.stockChart);
+    const wrapper = mount(<HighchartsStockChart />);
+    expect(wrapper.find(BaseChart)).toHaveProp(
+      'chartCreationFunc',
+      Highcharts.stockChart
+    );
   });
 
   it('renders a <BaseChart /> with the correct chart type', () => {
-    const wrapper = mount(<ProvidedHighchartsStockChart />);
+    const wrapper = mount(<HighchartsStockChart />);
     expect(wrapper.find(BaseChart)).toHaveProp('chartType', 'stockChart');
   });
 
   it('passes other props through to <BaseChart />', () => {
-    const wrapper = mount(<ProvidedHighchartsStockChart plotOptions={{ c: 'd' }} />);
-    expect(wrapper.find(BaseChart)).toHaveProp('plotOptions',{ c: 'd' });
+    const wrapper = mount(<HighchartsStockChart plotOptions={{ c: 'd' }} />);
+    expect(wrapper.find(BaseChart)).toHaveProp('plotOptions', { c: 'd' });
   });
 });
diff --git a/packages/react-jsx-highstock/test/components/Navigator/Navigator.spec.js b/packages/react-jsx-highstock/test/components/Navigator/Navigator.spec.js
index baea59fa..50ab9118 100644
--- a/packages/react-jsx-highstock/test/components/Navigator/Navigator.spec.js
+++ b/packages/react-jsx-highstock/test/components/Navigator/Navigator.spec.js
@@ -1,27 +1,30 @@
 import React from 'react';
+
+jest.mock('react-jsx-highcharts', () => ({
+  ...jest.requireActual('react-jsx-highcharts'),
+  useChart: jest.fn(),
+  useHighcharts: jest.fn()
+}));
+
+import { useChart, useHighcharts } from 'react-jsx-highcharts';
 import Navigator from '../../../src/components/Navigator/Navigator';
 import { Highcharts, createMockProvidedChart } from '../../test-utils';
-import { HighchartsContext, HighchartsChartContext} from 'react-jsx-highcharts';
 
 describe('<Navigator />', () => {
   let testContext;
-  let ProvidedNavigator;
 
   beforeEach(() => {
     testContext = {};
     testContext.object = {
       options: { navigator: { enabled: false } }
     };
-    const { chartStubs } = createMockProvidedChart({ object: testContext.object });
+    const { chartStubs } = createMockProvidedChart({
+      object: testContext.object
+    });
     testContext.chartStubs = chartStubs;
 
-    ProvidedNavigator = props => (
-      <HighchartsContext.Provider value={Highcharts}>
-        <HighchartsChartContext.Provider value={chartStubs}>
-          <Navigator {...props} />
-        </HighchartsChartContext.Provider>
-      </HighchartsContext.Provider>
-    )
+    useChart.mockImplementation(() => chartStubs);
+    useHighcharts.mockImplementation(() => Highcharts);
   });
 
   afterEach(() => {
@@ -30,48 +33,60 @@ describe('<Navigator />', () => {
 
   describe('when mounted', () => {
     it('enables the Navigator', () => {
-      mount(<ProvidedNavigator {...testContext.propsFromProviders} />);
+      mount(<Navigator />);
       expect(testContext.object.options.navigator.enabled).toEqual(true);
     });
 
     it('fires the `beforeRender` event to so Highcharts creates a Navigator', () => {
-      mount(<ProvidedNavigator {...testContext.propsFromProviders} />);
-      expect(Highcharts.fireEvent).toHaveBeenCalledWith(testContext.object, 'beforeRender');
+      mount(<Navigator />);
+      expect(Highcharts.fireEvent).toHaveBeenCalledWith(
+        testContext.object,
+        'beforeRender'
+      );
     });
 
     it('updates the chart with the passed props', () => {
-      mount(<ProvidedNavigator height={100} maskFill="rgba(1,2,3,0.45)" {...testContext.propsFromProviders} />);
-      expect(testContext.chartStubs.update).toHaveBeenCalledWith({
-        navigator: {
-          enabled: true,
-          height: 100,
-          maskFill: 'rgba(1,2,3,0.45)'
-        }
-      }, true);
+      mount(<Navigator height={100} maskFill="rgba(1,2,3,0.45)" />);
+      expect(testContext.chartStubs.update).toHaveBeenCalledWith(
+        {
+          navigator: {
+            enabled: true,
+            height: 100,
+            maskFill: 'rgba(1,2,3,0.45)'
+          }
+        },
+        true
+      );
     });
   });
 
   describe('update', () => {
     it('should use the update method when props change', () => {
-      const wrapper = mount(<ProvidedNavigator {...testContext.propsFromProviders} />);
+      const wrapper = mount(<Navigator />);
       wrapper.setProps({ maskInside: false });
-      expect(testContext.chartStubs.update).toHaveBeenCalledWith({
-        navigator: {
-          maskInside: false
-        }
-      }, expect.any(Boolean));
+      expect(testContext.chartStubs.update).toHaveBeenCalledWith(
+        {
+          navigator: {
+            maskInside: false
+          }
+        },
+        expect.any(Boolean)
+      );
     });
   });
 
   describe('when unmounted', () => {
     it('should disable the Navigator', () => {
-      const wrapper = mount(<ProvidedNavigator {...testContext.propsFromProviders} />);
+      const wrapper = mount(<Navigator />);
       wrapper.unmount();
-      expect(testContext.chartStubs.update).toHaveBeenCalledWith({
-        navigator: {
-          enabled: false
-        }
-      }, expect.any(Boolean))
+      expect(testContext.chartStubs.update).toHaveBeenCalledWith(
+        {
+          navigator: {
+            enabled: false
+          }
+        },
+        expect.any(Boolean)
+      );
     });
   });
 });
diff --git a/packages/react-jsx-highstock/test/components/RangeSelector/RangeSelector.spec.js b/packages/react-jsx-highstock/test/components/RangeSelector/RangeSelector.spec.js
index 1616664b..c2a455d5 100644
--- a/packages/react-jsx-highstock/test/components/RangeSelector/RangeSelector.spec.js
+++ b/packages/react-jsx-highstock/test/components/RangeSelector/RangeSelector.spec.js
@@ -1,87 +1,112 @@
 import React from 'react';
-import { Highcharts, createMockProvidedChart, createMockProvidedAxis } from '../../test-utils';
+import {
+  Highcharts,
+  createMockProvidedChart,
+  createMockProvidedAxis
+} from '../../test-utils';
+jest.mock('react-jsx-highcharts', () => ({
+  ...jest.requireActual('react-jsx-highcharts'),
+  useChart: jest.fn(),
+  useHighcharts: jest.fn(),
+  useAxis: jest.fn()
+}));
+import { useAxis, useChart, useHighcharts } from 'react-jsx-highcharts';
+
 import RangeSelector from '../../../src/components/RangeSelector/RangeSelector';
-import { HighchartsContext, HighchartsChartContext, HighchartsAxisContext, XAxis} from 'react-jsx-highcharts';
 
 describe('<RangeSelector />', () => {
   let testContext;
-  let ProvidedRangeSelector;
 
   beforeEach(() => {
     testContext = {};
     testContext.object = {
       options: { rangeSelector: { enabled: false } }
     };
-    const { chartStubs } = createMockProvidedChart({ object: testContext.object });
+    const { chartStubs } = createMockProvidedChart({
+      object: testContext.object
+    });
     testContext.chartStubs = chartStubs;
     testContext.chartStubs.update.mockReset();
     testContext.axisObject = {};
-    const { axisStubs } = createMockProvidedAxis({ object: testContext.axisObject });
+    const { axisStubs } = createMockProvidedAxis({
+      object: testContext.axisObject
+    });
     testContext.axisStubs = axisStubs;
 
-    ProvidedRangeSelector = props => (
-      <HighchartsContext.Provider value={Highcharts}>
-        <HighchartsChartContext.Provider value={chartStubs}>
-          <HighchartsAxisContext.Provider value={axisStubs}>
-            <RangeSelector {...props} />
-          </HighchartsAxisContext.Provider>
-        </HighchartsChartContext.Provider>
-      </HighchartsContext.Provider>
-    )
+    useAxis.mockImplementation(id => {
+      axisStubs.id = id;
+      return axisStubs;
+    });
+
+    useChart.mockImplementation(() => chartStubs);
+    useHighcharts.mockImplementation(() => Highcharts);
   });
 
   describe('when mounted', () => {
-
     it('enables the RangeSelector', () => {
-      mount(<ProvidedRangeSelector />);
+      mount(<RangeSelector />);
       expect(testContext.object.options.rangeSelector.enabled).toEqual(true);
     });
 
     it('fires the initialization event to so Highcharts creates a RangeSelector', () => {
-      mount(<ProvidedRangeSelector />);
-      expect(Highcharts.fireEvent).toHaveBeenCalledWith(testContext.object, 'afterGetContainer');
+      mount(<RangeSelector />);
+      expect(Highcharts.fireEvent).toHaveBeenCalledWith(
+        testContext.object,
+        'afterGetContainer'
+      );
     });
 
     it('updates the chart with the passed props', () => {
-      mount(<ProvidedRangeSelector height={100} buttonSpacing={2} />);
-      expect(testContext.chartStubs.update).toHaveBeenCalledWith({
-        rangeSelector: {
-          enabled: true,
-          inputEnabled: false,
-          height: 100,
-          buttonSpacing: 2,
-          buttons: []
-        }
-      }, expect.any(Boolean));
+      mount(<RangeSelector height={100} buttonSpacing={2} />);
+      expect(testContext.chartStubs.update).toHaveBeenCalledWith(
+        {
+          rangeSelector: {
+            enabled: true,
+            inputEnabled: false,
+            height: 100,
+            buttonSpacing: 2,
+            buttons: []
+          }
+        },
+        expect.any(Boolean)
+      );
     });
 
     it('updates the chart once', () => {
-      mount(<ProvidedRangeSelector />);
+      mount(<RangeSelector />);
       expect(testContext.chartStubs.update).toHaveBeenCalledTimes(1);
     });
   });
 
   describe('update', () => {
     it('should use the update method when props change', () => {
-      const wrapper = mount(<ProvidedRangeSelector selected={0} />);
+      const wrapper = mount(<RangeSelector selected={0} />);
+      testContext.chartStubs.update.mockClear();
       wrapper.setProps({ selected: 2 });
-      expect(testContext.chartStubs.update).toHaveBeenCalledWith({
-        rangeSelector: {
-          selected: 2
-        }
-      }, expect.any(Boolean));
+      expect(testContext.chartStubs.update).toHaveBeenCalledWith(
+        {
+          rangeSelector: {
+            selected: 2
+          }
+        },
+        expect.any(Boolean)
+      );
     });
   });
 
   describe('when unmounted', () => {
     it('should disable the RangeSelector', () => {
-      const wrapper = mount(<ProvidedRangeSelector />);
+      const wrapper = mount(<RangeSelector />);
+      testContext.chartStubs.update.mockClear();
       wrapper.unmount();
-      expect(testContext.chartStubs.update).toHaveBeenCalledWith({
-        rangeSelector: {
-          enabled: false
-        }
-      }, expect.any(Boolean));
+      expect(testContext.chartStubs.update).toHaveBeenCalledWith(
+        {
+          rangeSelector: {
+            enabled: false
+          }
+        },
+        expect.any(Boolean)
+      );
     });
   });
 });
diff --git a/packages/react-jsx-highstock/test/components/Scrollbar/Scrollbar.spec.js b/packages/react-jsx-highstock/test/components/Scrollbar/Scrollbar.spec.js
index 2fc1b398..4414473e 100644
--- a/packages/react-jsx-highstock/test/components/Scrollbar/Scrollbar.spec.js
+++ b/packages/react-jsx-highstock/test/components/Scrollbar/Scrollbar.spec.js
@@ -1,71 +1,84 @@
 import React from 'react';
 import { createMockProvidedChart } from '../../test-utils';
+
+jest.mock('react-jsx-highcharts', () => ({
+  ...jest.requireActual('react-jsx-highcharts'),
+  useChart: jest.fn()
+}));
+
+import { useChart } from 'react-jsx-highcharts';
 import Scrollbar from '../../../src/components/Scrollbar/Scrollbar';
 import { HighchartsChartContext } from 'react-jsx-highcharts';
 
 describe('<Scrollbar />', () => {
   let testContext;
-  let ProvidedScrollBar;
 
   beforeEach(() => {
     testContext = {};
-    const { chartStubs } = createMockProvidedChart({ object: testContext.object });
+    const { chartStubs } = createMockProvidedChart({
+      object: testContext.object
+    });
     testContext.chartStubs = chartStubs;
-
-    ProvidedScrollBar = props => (
-      <HighchartsChartContext.Provider value={ chartStubs }>
-        <Scrollbar {...props} />
-      </HighchartsChartContext.Provider>
-    )
+    useChart.mockImplementation(() => chartStubs);
   });
 
   describe('when mounted', () => {
     it('add scrollbar using the Highcharts update method', () => {
-      mount(<ProvidedScrollBar />);
-      expect(testContext.chartStubs.update).toHaveBeenCalledWith({
-        scrollbar: {
-          enabled: true
-        }
-      }, true);
+      mount(<Scrollbar />);
+      expect(testContext.chartStubs.update).toHaveBeenCalledWith(
+        {
+          scrollbar: {
+            enabled: true
+          }
+        },
+        true
+      );
     });
 
     it('updates the scrollbar with the passed props', () => {
-      mount(
-        <ProvidedScrollBar barBackgroundColor="red" height={20} />
+      mount(<Scrollbar barBackgroundColor="red" height={20} />);
+      expect(testContext.chartStubs.update).toHaveBeenCalledWith(
+        {
+          scrollbar: {
+            enabled: true,
+            barBackgroundColor: 'red',
+            height: 20
+          }
+        },
+        true
       );
-      expect(testContext.chartStubs.update).toHaveBeenCalledWith({
-        scrollbar: {
-          enabled: true,
-          barBackgroundColor: 'red',
-          height: 20
-        }
-      }, true);
     });
   });
 
   describe('update', () => {
     it('should use the update method when props change', () => {
-      const wrapper = mount(
-        <ProvidedScrollBar />
-      );
+      const wrapper = mount(<Scrollbar />);
+      testContext.chartStubs.update.mockClear();
       wrapper.setProps({ height: 12345 });
-      expect(testContext.chartStubs.update).toHaveBeenCalledWith({
-        scrollbar: {
-          height: 12345
-        }
-      }, true);
+      expect(testContext.chartStubs.update).toHaveBeenCalledWith(
+        {
+          scrollbar: {
+            height: 12345
+          }
+        },
+        true
+      );
     });
   });
 
   describe('when unmounted', () => {
     it('should disable the Scrollbar', () => {
-      const wrapper = mount(<ProvidedScrollBar />);
+      const wrapper = mount(<Scrollbar />);
+      testContext.chartStubs.update.mockClear();
       wrapper.unmount();
-      expect(testContext.chartStubs.update).toHaveBeenCalledWith({
-        scrollbar: {
-          enabled: false
-        }
-      }, true)
+      expect(testContext.chartStubs.update).toHaveBeenCalledWith(
+        {
+          scrollbar: {
+            enabled: false
+          }
+        },
+        true
+      );
     });
   });
 });