fix: React reference: Breadcrumb & RangeInput components (#2618)

* fix(Breadcrumb): remove react reference
* fix(RangeInput): remove react reference
* fix(range-input-test): mock the correct import

Author: samouss

src/components/Breadcrumb/Breadcrumb.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent } from 'preact-compat';
 import PropTypes from 'prop-types';
 import Template from '../Template.js';
 import autoHideContainerHOC from '../../decorators/autoHideContainer.js';

src/components/RangeInput/RangeInput.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component } from 'preact-compat';
 import PropTypes from 'prop-types';
 import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
 import headerFooterHOC from '../../decorators/headerFooter.js';

src/widgets/breadcrumb/breadcrumb.js

@@ -1,5 +1,4 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, { render } from 'preact-compat';
 import cx from 'classnames';
 
 import Breadcrumb from '../../components/Breadcrumb/Breadcrumb';
@@ -38,7 +37,7 @@ const renderer = ({
 
   const shouldAutoHideContainer = autoHideContainer && !canRefine;
 
-  ReactDOM.render(
+  render(
     <Breadcrumb
       canRefine={canRefine}
       cssClasses={cssClasses}

src/widgets/range-input/__tests__/range-input-test.js

@@ -1,10 +1,14 @@
-import ReactDOM from 'react-dom';
+import ReactDOM from 'preact-compat';
 import AlgoliasearchHelper from 'algoliasearch-helper';
 import rangeInput from '../range-input.js';
 
-jest.mock('react-dom', () => ({
-  render: jest.fn(),
-}));
+jest.mock('preact-compat', () => {
+  const module = require.requireActual('preact-compat');
+
+  module.render = jest.fn();
+
+  return module;
+});
 
 describe('rangeInput', () => {
   const attributeName = 'aNumAttr';

src/widgets/range-input/range-input.js

@@ -1,5 +1,4 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, { render } from 'preact-compat';
 import cx from 'classnames';
 import RangeInput from '../../components/RangeInput/RangeInput.js';
 import connectRange from '../../connectors/range/connectRange.js';
@@ -45,7 +44,7 @@ const renderer = ({
     max: maxValue !== Infinity && maxValue !== rangeMax ? maxValue : undefined,
   };
 
-  ReactDOM.render(
+  render(
     <RangeInput
       min={rangeMin}
       max={rangeMax}