From a99420a841e08cfe778806d6c0f3ee2f8d1a7b02 Mon Sep 17 00:00:00 2001
From: Danielle DSouza <danielle.dsouza@shopify.com>
Date: Tue, 27 Jul 2021 16:58:14 -0400
Subject: [PATCH] Modernize tests

---
 UNRELEASED.md                                 |   1 +
 .../components/DualThumb/DualThumb.tsx        |   8 +-
 .../DualThumb/tests/DualThumb.test.tsx        | 573 ++++++++++--------
 3 files changed, 334 insertions(+), 248 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 9fd49f30fd7..3cecf8415c8 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -28,5 +28,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Modernized tests for PageActions, Page and its components ([#4326](https://github.com/Shopify/polaris-react/pull/4326))
 - Modernized tests for FormLayout and some components of ColorPicker ([#4330](https://github.com/Shopify/polaris-react/pull/4330))
 - Modernized tests for Breadcrumbs, BulkActions, Button, ButtonGroup/Item, and ButtonGroup components([#4315](https://github.com/Shopify/polaris-react/pull/4315))
+- Modernized tests for DualThumb ([#4341](https://github.com/Shopify/polaris-react/pull/4341))
 
 ### Deprecations
diff --git a/src/components/RangeSlider/components/DualThumb/DualThumb.tsx b/src/components/RangeSlider/components/DualThumb/DualThumb.tsx
index c786c9062a5..c4c9083ea0f 100644
--- a/src/components/RangeSlider/components/DualThumb/DualThumb.tsx
+++ b/src/components/RangeSlider/components/DualThumb/DualThumb.tsx
@@ -238,15 +238,9 @@ export class DualThumb extends Component<DualThumbProps, State> {
             <div
               className={trackWrapperClassName}
               onMouseDown={this.handleMouseDownTrack}
-              testID="trackWrapper"
               ref={this.trackWrapper}
             >
-              <div
-                className={styles.Track}
-                style={cssVars}
-                ref={this.track}
-                testID="track"
-              />
+              <div className={styles.Track} style={cssVars} ref={this.track} />
               <div className={styles['Track--dashed']} />
               <div
                 id={idLower}
diff --git a/src/components/RangeSlider/components/DualThumb/tests/DualThumb.test.tsx b/src/components/RangeSlider/components/DualThumb/tests/DualThumb.test.tsx
index ae18f806167..eb49bb30195 100644
--- a/src/components/RangeSlider/components/DualThumb/tests/DualThumb.test.tsx
+++ b/src/components/RangeSlider/components/DualThumb/tests/DualThumb.test.tsx
@@ -1,10 +1,5 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {
-  mountWithAppProvider,
-  findByTestID,
-  ReactWrapper,
-} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 import {Key} from 'types';
 
 import {DualThumb, DualThumbProps} from '../DualThumb';
@@ -21,212 +16,224 @@ describe('<DualThumb />', () => {
     onChange: noop,
     label: 'Dual thumb range slider',
   };
+  const trackClassName = 'TrackWrapper';
+  const disabledTrackClassName = 'TrackWrapper disabled';
+
   describe('id', () => {
     it('is used on the lower thumb', () => {
       const id = 'MyNewID';
-      const dualThumb = mountWithAppProvider(
-        <DualThumb {...mockProps} id={id} />,
-      );
+      const dualThumb = mountWithApp(<DualThumb {...mockProps} id={id} />);
       const thumbLower = findThumbLower(dualThumb);
-      expect(thumbLower.prop('id')).toBe(id);
+      expect(thumbLower).toHaveReactProps({
+        id,
+      });
     });
 
     it('is used to set idUpper on the upper thumb', () => {
       const id = 'MyNewID';
-      const dualThumb = mountWithAppProvider(
-        <DualThumb {...mockProps} id={id} />,
-      );
+      const dualThumb = mountWithApp(<DualThumb {...mockProps} id={id} />);
       const thumbUpper = findThumbUpper(dualThumb);
-      expect(thumbUpper.prop('id')).toBe(`${id}Upper`);
+      expect(thumbUpper).toHaveReactProps({
+        id: `${id}Upper`,
+      });
     });
   });
 
   describe('min', () => {
     it('is used to set the aria-valuemin on the lower thumb', () => {
       const min = 0;
-      const dualThumb = mountWithAppProvider(
-        <DualThumb {...mockProps} min={min} />,
-      );
+      const dualThumb = mountWithApp(<DualThumb {...mockProps} min={min} />);
       const thumbLower = findThumbLower(dualThumb);
-      expect(thumbLower.prop('aria-valuemin')).toBe(min);
+      expect(thumbLower).toHaveReactProps({
+        'aria-valuemin': min,
+      });
     });
 
     it('is used to set the aria-valuemin on the upper thumb', () => {
       const min = 0;
-      const dualThumb = mountWithAppProvider(
-        <DualThumb {...mockProps} min={min} />,
-      );
+      const dualThumb = mountWithApp(<DualThumb {...mockProps} min={min} />);
       const thumbUpper = findThumbUpper(dualThumb);
-      expect(thumbUpper.prop('aria-valuemin')).toBe(min);
+      expect(thumbUpper).toHaveReactProps({
+        'aria-valuemin': min,
+      });
     });
   });
 
   describe('max', () => {
     it('is used to set the aria-valuemax on the lower thumb', () => {
       const max = 100;
-      const dualThumb = mountWithAppProvider(
-        <DualThumb {...mockProps} max={max} />,
-      );
+      const dualThumb = mountWithApp(<DualThumb {...mockProps} max={max} />);
       const thumbLower = findThumbLower(dualThumb);
-      expect(thumbLower.prop('aria-valuemax')).toBe(max);
+      expect(thumbLower).toHaveReactProps({
+        'aria-valuemax': max,
+      });
     });
 
     it('is used to set the aria-valuemax on the upper thumb', () => {
       const max = 100;
-      const dualThumb = mountWithAppProvider(
-        <DualThumb {...mockProps} max={max} />,
-      );
+      const dualThumb = mountWithApp(<DualThumb {...mockProps} max={max} />);
       const thumbUpper = findThumbUpper(dualThumb);
       expect(thumbUpper.prop('aria-valuemax')).toBe(max);
+      expect(thumbUpper).toHaveReactProps({
+        'aria-valuemax': max,
+      });
     });
   });
 
   describe('disabled', () => {
     it('sets aria-disabled to false by default on the lower thumb', () => {
-      const dualThumb = mountWithAppProvider(<DualThumb {...mockProps} />);
+      const dualThumb = mountWithApp(<DualThumb {...mockProps} />);
 
       const thumbLower = findThumbLower(dualThumb);
-      expect(thumbLower.prop('aria-disabled')).toBe(false);
+      expect(thumbLower).toHaveReactProps({
+        'aria-disabled': false,
+      });
     });
 
     it('sets aria-disabled to false by default on the upper thumb', () => {
-      const dualThumb = mountWithAppProvider(<DualThumb {...mockProps} />);
+      const dualThumb = mountWithApp(<DualThumb {...mockProps} />);
 
       const thumbUpper = findThumbUpper(dualThumb);
-      expect(thumbUpper.prop('aria-disabled')).toBe(false);
+      expect(thumbUpper).toHaveReactProps({
+        'aria-disabled': false,
+      });
     });
 
     it('sets aria-disabled to true on the lower thumb', () => {
-      const dualThumb = mountWithAppProvider(
-        <DualThumb {...mockProps} disabled />,
-      );
+      const dualThumb = mountWithApp(<DualThumb {...mockProps} disabled />);
 
       const thumbLower = findThumbLower(dualThumb);
-      expect(thumbLower.prop('aria-disabled')).toBe(true);
+      expect(thumbLower).toHaveReactProps({
+        'aria-disabled': true,
+      });
     });
 
     it('sets aria-disabled to true on the upper thumb', () => {
-      const dualThumb = mountWithAppProvider(
-        <DualThumb {...mockProps} disabled />,
-      );
+      const dualThumb = mountWithApp(<DualThumb {...mockProps} disabled />);
 
       const thumbUpper = findThumbUpper(dualThumb);
-      expect(thumbUpper.prop('aria-disabled')).toBe(true);
+      expect(thumbUpper).toHaveReactProps({
+        'aria-disabled': true,
+      });
     });
   });
 
   describe('error', () => {
     it('sets aria-invalid to true on the lower thumb', () => {
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} error="Error" />,
       );
 
       const thumbLower = findThumbLower(dualThumb);
-      expect(thumbLower.prop('aria-invalid')).toBe(true);
+      expect(thumbLower).toHaveReactProps({
+        'aria-invalid': true,
+      });
     });
 
     it('sets aria-invalid to true on the upper thumb', () => {
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} error="Error" />,
       );
 
       const thumbUpper = findThumbUpper(dualThumb);
-      expect(thumbUpper.prop('aria-invalid')).toBe(true);
+      expect(thumbUpper).toHaveReactProps({
+        'aria-invalid': true,
+      });
     });
 
     describe('aria-describedby', () => {
       it('gets set as RangeSliderError on the lower thumb', () => {
-        const dualThumb = mountWithAppProvider(
+        const dualThumb = mountWithApp(
           <DualThumb {...mockProps} error="Error" />,
         );
 
         const thumbLower = findThumbLower(dualThumb);
-        expect(thumbLower.prop('aria-describedby')).toBe('RangeSliderError');
+        expect(thumbLower).toHaveReactProps({
+          'aria-describedby': 'RangeSliderError',
+        });
       });
 
       it('gets set as RangeSliderError on the upper thumb', () => {
-        const dualThumb = mountWithAppProvider(
+        const dualThumb = mountWithApp(
           <DualThumb {...mockProps} error="Error" />,
         );
 
         const thumbUpper = findThumbUpper(dualThumb);
-        expect(thumbUpper.prop('aria-describedby')).toBe('RangeSliderError');
+        expect(thumbUpper).toHaveReactProps({
+          'aria-describedby': 'RangeSliderError',
+        });
       });
     });
   });
 
   describe('output', () => {
     it('does not render the lower output by default', () => {
-      const dualThumb = mountWithAppProvider(<DualThumb {...mockProps} />);
+      const dualThumb = mountWithApp(<DualThumb {...mockProps} />);
 
-      const outputLower = dualThumb.find('output').first();
+      const outputLower = dualThumb.findAll('output');
       expect(outputLower).toHaveLength(0);
     });
 
     it('does not render the upper output by default', () => {
-      const dualThumb = mountWithAppProvider(<DualThumb {...mockProps} />);
+      const dualThumb = mountWithApp(<DualThumb {...mockProps} />);
 
-      const outputUpper = dualThumb.find('output').last();
+      const outputUpper = dualThumb.findAll('output');
       expect(outputUpper).toHaveLength(0);
     });
 
     it('renders the lower output', () => {
-      const dualThumb = mountWithAppProvider(
-        <DualThumb {...mockProps} output />,
-      );
+      const dualThumb = mountWithApp(<DualThumb {...mockProps} output />);
 
-      const outputLower = dualThumb.find('output').first();
-      expect(outputLower).toHaveLength(1);
+      expect(dualThumb).toContainReactComponent('output', {
+        htmlFor: 'RangeSlider',
+      });
     });
 
     it('renders the upper output', () => {
-      const dualThumb = mountWithAppProvider(
-        <DualThumb {...mockProps} output />,
-      );
+      const dualThumb = mountWithApp(<DualThumb {...mockProps} output />);
 
-      const outputUpper = dualThumb.find('output').last();
-      expect(outputUpper).toHaveLength(1);
+      expect(dualThumb).toContainReactComponent('output', {
+        htmlFor: 'RangeSliderUpper',
+      });
     });
 
     it('renders the lower output value as text', () => {
-      const dualThumb = mountWithAppProvider(
-        <DualThumb {...mockProps} output />,
-      );
+      const dualThumb = mountWithApp(<DualThumb {...mockProps} output />);
 
-      const outputLower = dualThumb.find('output').first();
-      expect(outputLower.find('span').text()).toContain('0');
+      const outputLower = dualThumb.findAll('output')[0];
+      expect(outputLower.find('span')).toContainReactText('0');
     });
 
     it('renders the upper output value as text', () => {
-      const dualThumb = mountWithAppProvider(
-        <DualThumb {...mockProps} output />,
-      );
+      const dualThumb = mountWithApp(<DualThumb {...mockProps} output />);
 
-      const outputUpper = dualThumb.find('output').last();
-      expect(outputUpper.find('span').text()).toContain('1');
+      const outputUpper = dualThumb.find('output', {
+        htmlFor: 'RangeSliderUpper',
+      });
+      expect(outputUpper!.find('span')).toContainReactText('1');
     });
   });
 
   describe('onFocus()', () => {
     it('gets called when the lower thumb gets focus', () => {
       const onFocusSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} onFocus={onFocusSpy} />,
       );
 
       const lowerThumb = findThumbLower(dualThumb);
-      lowerThumb.simulate('focus');
+      lowerThumb.trigger('onFocus');
       expect(onFocusSpy).toHaveBeenCalledTimes(1);
     });
 
     it('gets called when the upper thumb gets focus', () => {
       const onFocusSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} onFocus={onFocusSpy} />,
       );
 
       const upperThumb = findThumbUpper(dualThumb);
-      upperThumb.simulate('focus');
+      upperThumb.trigger('onFocus');
       expect(onFocusSpy).toHaveBeenCalledTimes(1);
     });
   });
@@ -234,23 +241,23 @@ describe('<DualThumb />', () => {
   describe('onBlur()', () => {
     it('gets called when the lower thumb loses focus', () => {
       const onBlurSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} onBlur={onBlurSpy} />,
       );
 
       const lowerThumb = findThumbLower(dualThumb);
-      lowerThumb.simulate('blur');
+      lowerThumb.trigger('onBlur');
       expect(onBlurSpy).toHaveBeenCalledTimes(1);
     });
 
     it('gets called when the upper thumb loses focus', () => {
       const onBlurSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} onBlur={onBlurSpy} />,
       );
 
       const upperThumb = findThumbUpper(dualThumb);
-      upperThumb.simulate('blur');
+      upperThumb.trigger('onBlur');
       expect(onBlurSpy).toHaveBeenCalledTimes(1);
     });
   });
@@ -260,7 +267,7 @@ describe('<DualThumb />', () => {
       const onChangeSpy = jest.fn();
       const id = 'onChangeID';
 
-      mountWithAppProvider(
+      mountWithApp(
         <DualThumb
           {...mockProps}
           value={[15, 10]}
@@ -275,7 +282,7 @@ describe('<DualThumb />', () => {
     it('is not called when the value prop needs no sanitization', () => {
       const onChangeSpy = jest.fn();
 
-      mountWithAppProvider(
+      mountWithApp(
         <DualThumb {...mockProps} value={[10, 15]} onChange={onChangeSpy} />,
       );
 
@@ -285,16 +292,14 @@ describe('<DualThumb />', () => {
 
   describe('CSS custom properties', () => {
     it('gets set on the track', () => {
-      const dualThumb = mountWithAppProvider(<DualThumb {...mockProps} />);
+      const dualThumb = mountWithApp(<DualThumb {...mockProps} />);
 
-      const expected = {
-        '--Polaris-RangeSlider-progress-lower': '0px',
-        '--Polaris-RangeSlider-progress-upper': '-0.32px',
-      };
-      const track = findByTestID(dualThumb, 'track');
-      const actual = track.find('[style]').prop('style');
-
-      expect(actual).toStrictEqual(expected);
+      expect(dualThumb).toContainReactComponent('div', {
+        style: expect.objectContaining({
+          '--Polaris-RangeSlider-progress-lower': '0px',
+          '--Polaris-RangeSlider-progress-upper': '-0.32px',
+        }),
+      });
     });
 
     describe('when min is above 0', () => {
@@ -302,18 +307,16 @@ describe('<DualThumb />', () => {
         const min = 10;
         const max = 50;
 
-        const dualThumb = mountWithAppProvider(
+        const dualThumb = mountWithApp(
           <DualThumb {...mockProps} min={min} max={max} value={[10, 11]} />,
         );
 
-        const expected = {
-          '--Polaris-RangeSlider-progress-lower': '0px',
-          '--Polaris-RangeSlider-progress-upper': '-0.40000000000000036px',
-        };
-        const track = findByTestID(dualThumb, 'track');
-        const actual = track.find('[style]').prop('style');
-
-        expect(actual).toStrictEqual(expected);
+        expect(dualThumb).toContainReactComponent('div', {
+          style: expect.objectContaining({
+            '--Polaris-RangeSlider-progress-lower': '0px',
+            '--Polaris-RangeSlider-progress-upper': '-0.40000000000000036px',
+          }),
+        });
       });
     });
 
@@ -322,18 +325,16 @@ describe('<DualThumb />', () => {
         const min = -10;
         const max = 30;
 
-        const dualThumb = mountWithAppProvider(
+        const dualThumb = mountWithApp(
           <DualThumb {...mockProps} min={min} max={max} value={[-10, -9]} />,
         );
 
-        const expected = {
-          '--Polaris-RangeSlider-progress-lower': '0px',
-          '--Polaris-RangeSlider-progress-upper': '-0.3999999999999999px',
-        };
-        const track = findByTestID(dualThumb, 'track');
-        const actual = track.find('[style]').prop('style');
-
-        expect(actual).toStrictEqual(expected);
+        expect(dualThumb).toContainReactComponent('div', {
+          style: expect.objectContaining({
+            '--Polaris-RangeSlider-progress-lower': '0px',
+            '--Polaris-RangeSlider-progress-upper': '-0.3999999999999999px',
+          }),
+        });
       });
     });
   });
@@ -341,7 +342,7 @@ describe('<DualThumb />', () => {
   describe('keyboard control', () => {
     it('increments the lower value on right arrow press', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[10, 40]} onChange={onChangeSpy} />,
       );
       simulateKeyDown(findThumbLower(dualThumb), Key.RightArrow);
@@ -351,7 +352,7 @@ describe('<DualThumb />', () => {
 
     it('increments the upper value on right arrow press', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[10, 40]} onChange={onChangeSpy} />,
       );
       simulateKeyDown(findThumbUpper(dualThumb), Key.RightArrow);
@@ -361,7 +362,7 @@ describe('<DualThumb />', () => {
 
     it('decrement the upper value on left arrow press', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[10, 40]} onChange={onChangeSpy} />,
       );
       simulateKeyDown(findThumbUpper(dualThumb), Key.LeftArrow);
@@ -371,9 +372,10 @@ describe('<DualThumb />', () => {
 
     it('increments the lower value on up arrow press', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[10, 40]} onChange={onChangeSpy} />,
       );
+
       simulateKeyDown(findThumbLower(dualThumb), Key.UpArrow);
 
       expect(onChangeSpy).toHaveBeenCalledWith([11, 40], mockProps.id);
@@ -381,67 +383,83 @@ describe('<DualThumb />', () => {
 
     it('does not increment the lower value when it is a step below the upper value', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[39, 40]} onChange={onChangeSpy} />,
       );
       const lowerThumb = findThumbLower(dualThumb);
+      const upperThumb = findThumbUpper(dualThumb);
+
       simulateKeyDown(lowerThumb, Key.RightArrow);
 
       expect(onChangeSpy).not.toHaveBeenCalled();
-      expect([
-        lowerThumb.prop('aria-valuenow'),
-        findThumbUpper(dualThumb).prop('aria-valuenow'),
-      ]).toStrictEqual([39, 40]);
+      expect(lowerThumb).toHaveReactProps({
+        'aria-valuenow': 39,
+      });
+      expect(upperThumb).toHaveReactProps({
+        'aria-valuenow': 40,
+      });
     });
 
     it('does not decrement the lower value when it is equal to the min', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[0, 40]} onChange={onChangeSpy} />,
       );
       const lowerThumb = findThumbLower(dualThumb);
+      const upperThumb = findThumbUpper(dualThumb);
+
       simulateKeyDown(lowerThumb, Key.LeftArrow);
 
       expect(onChangeSpy).not.toHaveBeenCalled();
-      expect([
-        lowerThumb.prop('aria-valuenow'),
-        findThumbUpper(dualThumb).prop('aria-valuenow'),
-      ]).toStrictEqual([0, 40]);
+      expect(lowerThumb).toHaveReactProps({
+        'aria-valuenow': 0,
+      });
+      expect(upperThumb).toHaveReactProps({
+        'aria-valuenow': 40,
+      });
     });
 
     it('does not increment the upper value when it is equal to the max', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[0, 50]} onChange={onChangeSpy} />,
       );
+      const lowerThumb = findThumbLower(dualThumb);
       const upperThumb = findThumbUpper(dualThumb);
+
       simulateKeyDown(upperThumb, Key.RightArrow);
 
       expect(onChangeSpy).not.toHaveBeenCalled();
-      expect([
-        findThumbLower(dualThumb).prop('aria-valuenow'),
-        upperThumb.prop('aria-valuenow'),
-      ]).toStrictEqual([0, 50]);
+      expect(lowerThumb).toHaveReactProps({
+        'aria-valuenow': 0,
+      });
+      expect(upperThumb).toHaveReactProps({
+        'aria-valuenow': 50,
+      });
     });
 
     it('does not decrement the upper value when it is a step above the lower value', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[49, 50]} onChange={onChangeSpy} />,
       );
+      const lowerThumb = findThumbLower(dualThumb);
       const upperThumb = findThumbUpper(dualThumb);
+
       simulateKeyDown(upperThumb, Key.LeftArrow);
 
       expect(onChangeSpy).not.toHaveBeenCalled();
-      expect([
-        findThumbLower(dualThumb).prop('aria-valuenow'),
-        upperThumb.prop('aria-valuenow'),
-      ]).toStrictEqual([49, 50]);
+      expect(lowerThumb).toHaveReactProps({
+        'aria-valuenow': 49,
+      });
+      expect(upperThumb).toHaveReactProps({
+        'aria-valuenow': 50,
+      });
     });
 
     it('decrements the lower value on left arrow press', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[10, 40]} onChange={onChangeSpy} />,
       );
       simulateKeyDown(findThumbLower(dualThumb), Key.LeftArrow);
@@ -451,7 +469,7 @@ describe('<DualThumb />', () => {
 
     it('decrements the lower value on down arrow press', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[10, 40]} onChange={onChangeSpy} />,
       );
       simulateKeyDown(findThumbLower(dualThumb), Key.DownArrow);
@@ -461,7 +479,7 @@ describe('<DualThumb />', () => {
 
     it('increment the lower value on up arrow press', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[10, 40]} onChange={onChangeSpy} />,
       );
       simulateKeyDown(findThumbLower(dualThumb), Key.UpArrow);
@@ -471,7 +489,7 @@ describe('<DualThumb />', () => {
 
     it('decrement the lower value on down arrow press', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[10, 40]} onChange={onChangeSpy} />,
       );
       simulateKeyDown(findThumbLower(dualThumb), Key.DownArrow);
@@ -481,7 +499,7 @@ describe('<DualThumb />', () => {
 
     it('does not change the lower value if disabled', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb
           {...mockProps}
           value={[10, 40]}
@@ -496,7 +514,7 @@ describe('<DualThumb />', () => {
 
     it('does not change the upper value if disabled', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb
           {...mockProps}
           value={[10, 40]}
@@ -509,8 +527,8 @@ describe('<DualThumb />', () => {
       expect(onChangeSpy).not.toHaveBeenCalled();
     });
 
-    function simulateKeyDown(component: ReactWrapper, keyCode: Key) {
-      component.simulate('keyDown', {
+    function simulateKeyDown(component: any, keyCode: Key) {
+      component.trigger('onKeyDown', {
         keyCode,
         preventDefault: noop,
         stopPropagation: noop,
@@ -531,6 +549,7 @@ describe('<DualThumb />', () => {
         .mockImplementation((eventType: string, callback: EventCallback) => {
           eventMap[eventType] = callback;
         });
+
       getBoundingClientRectSpy = jest
         .spyOn(Element.prototype, 'getBoundingClientRect')
         .mockImplementation(mockGetBoundingClientRect);
@@ -543,7 +562,7 @@ describe('<DualThumb />', () => {
 
     it('moving the lower thumb sets the lower value', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[10, 40]} onChange={onChangeSpy} />,
       );
 
@@ -554,7 +573,7 @@ describe('<DualThumb />', () => {
 
     it('moving the upper thumb sets the upper value', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[10, 40]} onChange={onChangeSpy} />,
       );
 
@@ -568,7 +587,7 @@ describe('<DualThumb />', () => {
         document,
         'removeEventListener',
       );
-      const dualThumb = mountWithAppProvider(<DualThumb {...mockProps} />);
+      const dualThumb = mountWithApp(<DualThumb {...mockProps} />);
 
       moveUpperThumb(dualThumb, 0.5);
       removeEventListenerSpy.mockClear();
@@ -580,7 +599,7 @@ describe('<DualThumb />', () => {
 
     it('the lower and upper thumbs do not move when using a non-primary mouse button', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[10, 40]} onChange={onChangeSpy} />,
       );
 
@@ -592,7 +611,7 @@ describe('<DualThumb />', () => {
 
     it('the lower and upper thumbs do not move when disabled', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb
           {...mockProps}
           value={[10, 40]}
@@ -609,33 +628,33 @@ describe('<DualThumb />', () => {
 
     it('moves the lower thumb when the track is clicked closer to it than the upper thumb', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[5, 40]} onChange={onChangeSpy} />,
       );
 
-      clickTrack(dualThumb, 0.2);
+      clickTrack(dualThumb, 0.2, trackClassName);
 
       expect(onChangeSpy).toHaveBeenCalledWith([10, 40], mockProps.id);
     });
 
     it('moves the upper thumb when the track is clicked closer to it than the lower thumb', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[5, 40]} onChange={onChangeSpy} />,
       );
 
-      clickTrack(dualThumb, 0.6);
+      clickTrack(dualThumb, 0.6, trackClassName);
 
       expect(onChangeSpy).toHaveBeenCalledWith([5, 30], mockProps.id);
     });
 
     it('moves the lower thumb when the track is clicked closer to it than the upper thumb and the mouse moves', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[5, 40]} onChange={onChangeSpy} />,
       );
 
-      clickTrack(dualThumb, 0.2);
+      clickTrack(dualThumb, 0.2, trackClassName);
       moveLowerThumb(dualThumb, 0.3);
 
       expect(onChangeSpy).toHaveBeenCalledWith([15, 40], mockProps.id);
@@ -643,11 +662,11 @@ describe('<DualThumb />', () => {
 
     it('moves the upper thumb when the track is clicked closer to it than the lower thumb and the mouse moves', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[5, 40]} onChange={onChangeSpy} />,
       );
 
-      clickTrack(dualThumb, 0.6);
+      clickTrack(dualThumb, 0.6, trackClassName);
       moveUpperThumb(dualThumb, 0.9);
 
       expect(onChangeSpy).toHaveBeenCalledWith([5, 45], mockProps.id);
@@ -655,7 +674,7 @@ describe('<DualThumb />', () => {
 
     it('does not move the lower thumb when the track is clicked and is disabled', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb
           {...mockProps}
           value={[5, 40]}
@@ -664,14 +683,14 @@ describe('<DualThumb />', () => {
         />,
       );
 
-      clickTrack(dualThumb, 0.2);
+      clickTrack(dualThumb, 0.2, disabledTrackClassName);
 
       expect(onChangeSpy).not.toHaveBeenCalled();
     });
 
     it('does not move the upper thumb when the track is clicked and is disabled', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb
           {...mockProps}
           value={[5, 40]}
@@ -680,44 +699,54 @@ describe('<DualThumb />', () => {
         />,
       );
 
-      clickTrack(dualThumb, 0.6);
+      clickTrack(dualThumb, 0.6, disabledTrackClassName);
 
       expect(onChangeSpy).not.toHaveBeenCalled();
     });
 
     function clickTrack(
-      component: ReactWrapper,
+      component: any,
       percentageOfTrackX: number,
+      className: string,
       button = 0,
     ) {
       const trackWidth = 100;
       const clientX = trackWidth * percentageOfTrackX;
 
       window.dispatchEvent(new Event('resize'));
-      findTrack(component).simulate('mouseDown', {button, clientX});
+      findTrack(component, className).trigger(
+        'onMouseDown',
+        new MouseEvent('mouseDown', {button, clientX}),
+      );
     }
 
     function moveLowerThumb(
-      component: ReactWrapper,
+      component: any,
       percentageOfTrackX: number,
       button = 0,
     ) {
       const trackWidth = 100;
 
       window.dispatchEvent(new Event('resize'));
-      findThumbLower(component).simulate('mouseDown', {button});
+      findThumbLower(component).trigger(
+        'onMouseDown',
+        new MouseEvent('mouseDown', {button}),
+      );
       eventMap.mousemove({clientX: trackWidth * percentageOfTrackX});
     }
 
     function moveUpperThumb(
-      component: ReactWrapper,
+      component: any,
       percentageOfTrackX: number,
       button = 0,
     ) {
       const trackWidth = 100;
 
       window.dispatchEvent(new Event('resize'));
-      findThumbUpper(component).simulate('mouseDown', {button});
+      findThumbUpper(component).trigger(
+        'onMouseDown',
+        new MouseEvent('mouseDown', {button}),
+      );
       eventMap.mousemove({clientX: trackWidth * percentageOfTrackX});
     }
   });
@@ -747,7 +776,7 @@ describe('<DualThumb />', () => {
 
     it('touchmove the lower thumb sets the lower value', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[10, 40]} onChange={onChangeSpy} />,
       );
 
@@ -758,7 +787,7 @@ describe('<DualThumb />', () => {
 
     it('touchmove the upper thumb sets the upper value', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[10, 40]} onChange={onChangeSpy} />,
       );
 
@@ -772,7 +801,7 @@ describe('<DualThumb />', () => {
         document,
         'removeEventListener',
       );
-      const dualThumb = mountWithAppProvider(<DualThumb {...mockProps} />);
+      const dualThumb = mountWithApp(<DualThumb {...mockProps} />);
 
       moveUpperThumb(dualThumb, 0.5);
       removeEventListenerSpy.mockClear();
@@ -789,7 +818,7 @@ describe('<DualThumb />', () => {
         document,
         'removeEventListener',
       );
-      const dualThumb = mountWithAppProvider(<DualThumb {...mockProps} />);
+      const dualThumb = mountWithApp(<DualThumb {...mockProps} />);
 
       moveUpperThumb(dualThumb, 0.5);
       removeEventListenerSpy.mockClear();
@@ -803,7 +832,7 @@ describe('<DualThumb />', () => {
 
     it('the lower and upper thumbs do not move when disabled', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb
           {...mockProps}
           value={[10, 40]}
@@ -820,33 +849,33 @@ describe('<DualThumb />', () => {
 
     it('moves the lower thumb when the track is touched closer to it than the upper thumb', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[5, 40]} onChange={onChangeSpy} />,
       );
 
-      touchTrack(dualThumb, 0.2);
+      touchTrack(dualThumb, 0.2, trackClassName);
 
       expect(onChangeSpy).toHaveBeenCalledWith([10, 40], mockProps.id);
     });
 
     it('moves the upper thumb when the track is touched closer to it than the lower thumb', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[5, 40]} onChange={onChangeSpy} />,
       );
 
-      touchTrack(dualThumb, 0.6);
+      touchTrack(dualThumb, 0.6, trackClassName);
 
       expect(onChangeSpy).toHaveBeenCalledWith([5, 30], mockProps.id);
     });
 
     it('moves the lower thumb when the track is touched closer to it than the upper thumb and then touchmove', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[5, 40]} onChange={onChangeSpy} />,
       );
 
-      touchTrack(dualThumb, 0.2);
+      touchTrack(dualThumb, 0.2, trackClassName);
       moveLowerThumb(dualThumb, 0.3, false);
 
       expect(onChangeSpy).toHaveBeenCalledWith([15, 40], mockProps.id);
@@ -854,11 +883,11 @@ describe('<DualThumb />', () => {
 
     it('moves the upper thumb when the track is touched closer to it than the lower thumb and then touchmove', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[5, 40]} onChange={onChangeSpy} />,
       );
 
-      touchTrack(dualThumb, 0.6);
+      touchTrack(dualThumb, 0.6, trackClassName);
       moveUpperThumb(dualThumb, 0.9, false);
 
       expect(onChangeSpy).toHaveBeenCalledWith([5, 45], mockProps.id);
@@ -866,7 +895,7 @@ describe('<DualThumb />', () => {
 
     it('does not move the lower thumb when the track is touched and is disabled', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb
           {...mockProps}
           value={[5, 40]}
@@ -875,14 +904,14 @@ describe('<DualThumb />', () => {
         />,
       );
 
-      touchTrack(dualThumb, 0.2);
+      touchTrack(dualThumb, 0.2, disabledTrackClassName);
 
       expect(onChangeSpy).not.toHaveBeenCalled();
     });
 
     it('does not move the upper thumb when the track is touched and is disabled', () => {
       const onChangeSpy = jest.fn();
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb
           {...mockProps}
           value={[5, 40]}
@@ -891,17 +920,17 @@ describe('<DualThumb />', () => {
         />,
       );
 
-      touchTrack(dualThumb, 0.6);
+      touchTrack(dualThumb, 0.6, disabledTrackClassName);
 
       expect(onChangeSpy).not.toHaveBeenCalled();
     });
 
     it('removes touchstart listener on track', () => {
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[5, 40]} onChange={noop} />,
       );
 
-      const track = findTrack(dualThumb).getDOMNode();
+      const track = findTrack(dualThumb, trackClassName).domNode;
 
       const removeEventListenerSpy = jest.spyOn(track, 'removeEventListener');
       removeEventListenerSpy.mockClear();
@@ -911,7 +940,11 @@ describe('<DualThumb />', () => {
       expect(removeEventListenerSpy).toHaveBeenCalled();
     });
 
-    function touchTrack(component: ReactWrapper, percentageOfTrackX: number) {
+    function touchTrack(
+      component: any,
+      percentageOfTrackX: number,
+      className: string,
+    ) {
       const trackWidth = 100;
       const clientX = trackWidth * percentageOfTrackX;
 
@@ -922,18 +955,22 @@ describe('<DualThumb />', () => {
       } as TouchEventInit);
       Object.assign(event, {preventDefault: noop});
 
-      findTrack(component).getDOMNode().dispatchEvent(event);
+      findTrack(component, className).domNode.dispatchEvent(event);
     }
 
     function moveLowerThumb(
-      component: ReactWrapper,
+      component: any,
       percentageOfTrackX: number,
       simulateTouchStart = true,
     ) {
       const trackWidth = 100;
 
       window.dispatchEvent(new Event('resize'));
-      if (simulateTouchStart) findThumbLower(component).simulate('touchStart');
+      if (simulateTouchStart)
+        findThumbLower(component).trigger(
+          'onTouchStart',
+          new TouchEvent('touchStart'),
+        );
       eventMap.touchmove({
         touches: [{clientX: trackWidth * percentageOfTrackX}],
         preventDefault: noop,
@@ -941,7 +978,7 @@ describe('<DualThumb />', () => {
     }
 
     function moveUpperThumb(
-      component: ReactWrapper,
+      component: any,
       percentageOfTrackX: number,
       simulateTouchStart = true,
     ) {
@@ -949,7 +986,11 @@ describe('<DualThumb />', () => {
 
       window.dispatchEvent(new Event('resize'));
 
-      if (simulateTouchStart) findThumbUpper(component).simulate('touchStart');
+      if (simulateTouchStart)
+        findThumbUpper(component).trigger(
+          'onTouchStart',
+          new TouchEvent('touchStart'),
+        );
       eventMap.touchmove({
         touches: [{clientX: trackWidth * percentageOfTrackX}],
         preventDefault: noop,
@@ -959,112 +1000,162 @@ describe('<DualThumb />', () => {
 
   describe('value prop sanitization', () => {
     it('sanitizes the lower value with respect to the step prop', () => {
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[4, 40]} step={5} />,
       );
-      expect([
-        findThumbLower(dualThumb).prop('aria-valuenow'),
-        findThumbUpper(dualThumb).prop('aria-valuenow'),
-      ]).toStrictEqual([5, 40]);
+      const lowerThumb = findThumbLower(dualThumb);
+      const upperThumb = findThumbUpper(dualThumb);
+
+      expect(lowerThumb).toHaveReactProps({
+        'aria-valuenow': 5,
+      });
+      expect(upperThumb).toHaveReactProps({
+        'aria-valuenow': 40,
+      });
     });
 
     it('sanitizes the upper value with respect to the step prop', () => {
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[5, 41]} step={5} />,
       );
-      expect([
-        findThumbLower(dualThumb).prop('aria-valuenow'),
-        findThumbUpper(dualThumb).prop('aria-valuenow'),
-      ]).toStrictEqual([5, 40]);
+      const lowerThumb = findThumbLower(dualThumb);
+      const upperThumb = findThumbUpper(dualThumb);
+
+      expect(lowerThumb).toHaveReactProps({
+        'aria-valuenow': 5,
+      });
+      expect(upperThumb).toHaveReactProps({
+        'aria-valuenow': 40,
+      });
     });
 
     it('sanitizes the lower value with respect to the max prop', () => {
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[110, 150]} max={100} />,
       );
-      expect([
-        findThumbLower(dualThumb).prop('aria-valuenow'),
-        findThumbUpper(dualThumb).prop('aria-valuenow'),
-      ]).toStrictEqual([99, 100]);
+      const lowerThumb = findThumbLower(dualThumb);
+      const upperThumb = findThumbUpper(dualThumb);
+
+      expect(lowerThumb).toHaveReactProps({
+        'aria-valuenow': 99,
+      });
+      expect(upperThumb).toHaveReactProps({
+        'aria-valuenow': 100,
+      });
     });
 
     it('sanitizes the upper value with respect to the max prop', () => {
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[110, 150]} max={100} />,
       );
-      expect([
-        findThumbLower(dualThumb).prop('aria-valuenow'),
-        findThumbUpper(dualThumb).prop('aria-valuenow'),
-      ]).toStrictEqual([99, 100]);
+      const lowerThumb = findThumbLower(dualThumb);
+      const upperThumb = findThumbUpper(dualThumb);
+
+      expect(lowerThumb).toHaveReactProps({
+        'aria-valuenow': 99,
+      });
+      expect(upperThumb).toHaveReactProps({
+        'aria-valuenow': 100,
+      });
     });
 
     it('sanitizes the lower value with respect to the min prop', () => {
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[10, 40]} min={20} />,
       );
-      expect([
-        findThumbLower(dualThumb).prop('aria-valuenow'),
-        findThumbUpper(dualThumb).prop('aria-valuenow'),
-      ]).toStrictEqual([20, 40]);
+      const lowerThumb = findThumbLower(dualThumb);
+      const upperThumb = findThumbUpper(dualThumb);
+
+      expect(lowerThumb).toHaveReactProps({
+        'aria-valuenow': 20,
+      });
+      expect(upperThumb).toHaveReactProps({
+        'aria-valuenow': 40,
+      });
     });
 
     it('sanitizes the upper value with respect to the min prop', () => {
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[10, 15]} min={20} />,
       );
-      expect([
-        findThumbLower(dualThumb).prop('aria-valuenow'),
-        findThumbUpper(dualThumb).prop('aria-valuenow'),
-      ]).toStrictEqual([20, 21]);
+      const lowerThumb = findThumbLower(dualThumb);
+      const upperThumb = findThumbUpper(dualThumb);
+
+      expect(lowerThumb).toHaveReactProps({
+        'aria-valuenow': 20,
+      });
+      expect(upperThumb).toHaveReactProps({
+        'aria-valuenow': 21,
+      });
     });
 
     it('sets the lower value to a step below the upper value if the lower value equals the upper value', () => {
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[10, 10]} />,
       );
+      const lowerThumb = findThumbLower(dualThumb);
+      const upperThumb = findThumbUpper(dualThumb);
 
-      expect([
-        findThumbLower(dualThumb).prop('aria-valuenow'),
-        findThumbUpper(dualThumb).prop('aria-valuenow'),
-      ]).toStrictEqual([9, 10]);
+      expect(lowerThumb).toHaveReactProps({
+        'aria-valuenow': 9,
+      });
+      expect(upperThumb).toHaveReactProps({
+        'aria-valuenow': 10,
+      });
     });
 
     it('sets the lower value to a step below the upper value if the lower value is higher than the upper value', () => {
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[15, 10]} />,
       );
+      const lowerThumb = findThumbLower(dualThumb);
+      const upperThumb = findThumbUpper(dualThumb);
 
-      expect([
-        findThumbLower(dualThumb).prop('aria-valuenow'),
-        findThumbUpper(dualThumb).prop('aria-valuenow'),
-      ]).toStrictEqual([9, 10]);
+      expect(lowerThumb).toHaveReactProps({
+        'aria-valuenow': 9,
+      });
+      expect(upperThumb).toHaveReactProps({
+        'aria-valuenow': 10,
+      });
     });
 
     it('sets the upper value to one step above the min and the lower value to the min when they are out of bounds and inversed', () => {
-      const dualThumb = mountWithAppProvider(
+      const dualThumb = mountWithApp(
         <DualThumb {...mockProps} value={[1500, -10]} />,
       );
+      const lowerThumb = findThumbLower(dualThumb);
+      const upperThumb = findThumbUpper(dualThumb);
 
-      expect([
-        findThumbLower(dualThumb).prop('aria-valuenow'),
-        findThumbUpper(dualThumb).prop('aria-valuenow'),
-      ]).toStrictEqual([0, 1]);
+      expect(lowerThumb).toHaveReactProps({
+        'aria-valuenow': 0,
+      });
+      expect(upperThumb).toHaveReactProps({
+        'aria-valuenow': 1,
+      });
     });
   });
 });
 
 function noop() {}
 
-function findThumbLower(containerComponent: ReactWrapper) {
-  return containerComponent.find('[role="slider"]').first();
+function findThumbLower(containerComponent: any) {
+  return containerComponent.find('div', {
+    role: 'slider',
+  });
 }
 
-function findThumbUpper(containerComponent: ReactWrapper) {
-  return containerComponent.find('[role="slider"]').last();
+function findThumbUpper(containerComponent: any) {
+  const thumbs = containerComponent.findAll('div', {
+    role: 'slider',
+  });
+  const lastIndex = thumbs.length - 1;
+  return thumbs[lastIndex];
 }
 
-function findTrack(containerComponent: ReactWrapper) {
-  return findByTestID(containerComponent, 'trackWrapper');
+function findTrack(containerComponent: any, className: string) {
+  return containerComponent.find('div', {
+    className,
+  });
 }
 
 function mockGetBoundingClientRect(): ReturnType<