From d8f552b0a89f4e4829a523a18ee3e3560d02f729 Mon Sep 17 00:00:00 2001
From: Abbey Hart <abbeyhrt@gmail.com>
Date: Fri, 22 Jul 2022 09:20:44 -0500
Subject: [PATCH] refactor(react): update list-box components tests to rtl
 (#11807)

* test(react): update dropdown and listbox helpers to rtl

* test(react): update list box components to RTL

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../src/components/ComboBox/ComboBox-test.js  | 134 ++--
 .../src/components/Dropdown/Dropdown-test.js  | 137 ++--
 .../__snapshots__/Dropdown-test.js.snap       | 663 ------------------
 .../src/components/ListBox/test-helpers.js    |  76 +-
 .../__tests__/FilterableMultiSelect-test.js   | 106 ++-
 .../FilterableMultiSelect-test.js.snap        | 187 -----
 6 files changed, 198 insertions(+), 1105 deletions(-)
 delete mode 100644 packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
 delete mode 100644 packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap

diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js
index 2cd0991d5ce2..fda420019087 100644
--- a/packages/react/src/components/ComboBox/ComboBox-test.js
+++ b/packages/react/src/components/ComboBox/ComboBox-test.js
@@ -6,12 +6,10 @@
  */
 
 import React from 'react';
-import { mount } from 'enzyme';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {
   findListBoxNode,
-  findMenuNode,
   assertMenuOpen,
   assertMenuClosed,
   generateItems,
@@ -19,10 +17,9 @@ import {
 } from '../ListBox/test-helpers';
 import ComboBox from '../ComboBox';
 
-const prefix = 'cds';
-const findInputNode = (wrapper) => wrapper.find(`.${prefix}--text-input`);
-const openMenu = (wrapper) => {
-  wrapper.find(`[role="combobox"]`).simulate('click');
+const findInputNode = () => screen.getByRole('combobox');
+const openMenu = () => {
+  userEvent.click(findInputNode());
 };
 
 describe('ComboBox', () => {
@@ -38,28 +35,23 @@ describe('ComboBox', () => {
     };
   });
 
-  it('should display the placeholder text when no items are selected and the control is not focused', () => {
-    const wrapper = mount(<ComboBox {...mockProps} />);
-    expect(findInputNode(wrapper).prop('value')).toBe('');
-    expect(findInputNode(wrapper).prop('placeholder')).toBe(
-      mockProps.placeholder
-    );
-  });
-
   it('should display the menu of items when a user clicks on the input', () => {
-    const wrapper = mount(<ComboBox {...mockProps} />);
-    findInputNode(wrapper).simulate('click');
+    render(<ComboBox {...mockProps} />);
 
-    assertMenuOpen(wrapper, mockProps);
+    userEvent.click(findInputNode());
+
+    assertMenuOpen(mockProps);
   });
 
   it('should call `onChange` each time an item is selected', () => {
-    const wrapper = mount(<ComboBox {...mockProps} />);
+    render(<ComboBox {...mockProps} />);
     expect(mockProps.onChange).not.toHaveBeenCalled();
 
     for (let i = 0; i < mockProps.items.length; i++) {
-      openMenu(wrapper);
-      wrapper.find('ListBoxMenuItem').at(i).simulate('click');
+      openMenu();
+
+      userEvent.click(screen.getAllByRole('option')[i]);
+
       expect(mockProps.onChange).toHaveBeenCalledTimes(i + 1);
       expect(mockProps.onChange).toHaveBeenCalledWith({
         selectedItem: mockProps.items[i],
@@ -69,41 +61,40 @@ describe('ComboBox', () => {
 
   it('capture filter text events', () => {
     const onInputChange = jest.fn();
-    const wrapper = mount(
-      <ComboBox {...mockProps} onInputChange={onInputChange} />
-    );
+    render(<ComboBox {...mockProps} onInputChange={onInputChange} />);
 
-    findInputNode(wrapper).simulate('change', {
-      target: { value: 'something' },
-    });
+    userEvent.type(findInputNode(), 'something');
 
     expect(onInputChange).toHaveBeenCalledWith('something');
   });
 
   it('should render custom item components', () => {
-    const wrapper = mount(<ComboBox {...mockProps} />);
-    wrapper.setProps({
-      itemToElement: (item) => <div className="mock-item">{item.text}</div>,
+    const itemToElement = jest.fn((item) => {
+      return <div className="mock-item">{item.text}</div>;
     });
-    openMenu(wrapper);
+    render(<ComboBox {...mockProps} itemToElement={itemToElement} />);
+    openMenu();
 
-    expect(wrapper.find(`.mock-item`).length).toBe(mockProps.items.length);
+    expect(itemToElement).toHaveBeenCalled();
   });
 
   it('should let the user select an option by clicking on the option node', () => {
-    const wrapper = mount(<ComboBox {...mockProps} />);
-    openMenu(wrapper);
-    wrapper.find('ListBoxMenuItem').at(0).simulate('click');
+    render(<ComboBox {...mockProps} />);
+    openMenu();
+
+    userEvent.click(screen.getAllByRole('option')[0]);
+
     expect(mockProps.onChange).toHaveBeenCalledTimes(1);
     expect(mockProps.onChange).toHaveBeenCalledWith({
       selectedItem: mockProps.items[0],
     });
-    assertMenuClosed(wrapper);
+    assertMenuClosed();
 
     mockProps.onChange.mockClear();
 
-    openMenu(wrapper);
-    wrapper.find('ListBoxMenuItem').at(1).simulate('click');
+    openMenu();
+
+    userEvent.click(screen.getAllByRole('option')[1]);
     expect(mockProps.onChange).toHaveBeenCalledTimes(1);
     expect(mockProps.onChange).toHaveBeenCalledWith({
       selectedItem: mockProps.items[1],
@@ -112,12 +103,10 @@ describe('ComboBox', () => {
 
   describe('should display initially selected item found in `initialSelectedItem`', () => {
     it('using an object type for the `initialSelectedItem` prop', () => {
-      const wrapper = mount(
+      render(
         <ComboBox {...mockProps} initialSelectedItem={mockProps.items[0]} />
       );
-      expect(findInputNode(wrapper).prop('value')).toEqual(
-        mockProps.items[0].label
-      );
+      expect(findInputNode()).toHaveDisplayValue(mockProps.items[0].label);
     });
 
     it('using a string type for the `initialSelectedItem` prop', () => {
@@ -127,22 +116,19 @@ describe('ComboBox', () => {
         items: ['1', '2', '3'],
       };
 
-      const wrapper = mount(
+      render(
         <ComboBox {...mockProps} initialSelectedItem={mockProps.items[1]} />
       );
 
-      expect(findInputNode(wrapper).prop('value')).toEqual(mockProps.items[1]);
+      expect(findInputNode()).toHaveDisplayValue(mockProps.items[1]);
     });
   });
 
   describe('should display selected item found in `selectedItem`', () => {
     it('using an object type for the `selectedItem` prop', () => {
-      const wrapper = mount(
-        <ComboBox {...mockProps} selectedItem={mockProps.items[0]} />
-      );
-      expect(findInputNode(wrapper).prop('value')).toEqual(
-        mockProps.items[0].label
-      );
+      render(<ComboBox {...mockProps} selectedItem={mockProps.items[0]} />);
+
+      expect(findInputNode()).toHaveDisplayValue(mockProps.items[0].label);
     });
 
     it('using a string type for the `selectedItem` prop', () => {
@@ -152,55 +138,37 @@ describe('ComboBox', () => {
         items: ['1', '2', '3'],
       };
 
-      const wrapper = mount(
-        <ComboBox {...mockProps} selectedItem={mockProps.items[1]} />
-      );
+      render(<ComboBox {...mockProps} selectedItem={mockProps.items[1]} />);
 
-      expect(findInputNode(wrapper).prop('value')).toEqual(mockProps.items[1]);
+      expect(findInputNode()).toHaveDisplayValue(mockProps.items[1]);
     });
   });
 
   describe('when disabled', () => {
     it('should not let the user edit the input node', () => {
-      const wrapper = mount(<ComboBox {...mockProps} disabled={true} />);
-      expect(findInputNode(wrapper).prop('disabled')).toBe(true);
-      expect(findInputNode(wrapper).prop('value')).toBe('');
-
-      findInputNode(wrapper).simulate('change', {
-        target: {
-          value: 'a',
-        },
-      });
+      render(<ComboBox {...mockProps} disabled={true} />);
+
+      expect(findInputNode()).toHaveAttribute('disabled');
+
+      expect(findInputNode()).toHaveDisplayValue('');
+
+      userEvent.type(findInputNode(), 'a');
 
-      expect(findInputNode(wrapper).prop('value')).toBe('');
+      expect(findInputNode()).toHaveDisplayValue('');
     });
 
     it('should not let the user expand the menu', () => {
-      const wrapper = mount(<ComboBox {...mockProps} disabled={true} />);
-      openMenu(wrapper);
-      expect(findListBoxNode(wrapper).hasClass('bx--list-box--expanded')).toBe(
-        false
-      );
+      render(<ComboBox {...mockProps} disabled={true} />);
+      openMenu();
+      expect(findListBoxNode()).not.toHaveClass('cds--list-box--expanded');
     });
   });
 
   describe('downshift quirks', () => {
-    it('should not trigger the menu when typing a space in input', () => {
-      const wrapper = mount(<ComboBox {...mockProps} />);
-
-      openMenu(wrapper);
-      findInputNode(wrapper).simulate('change', {
-        target: {
-          value: ' ',
-        },
-      });
-
-      expect(findMenuNode(wrapper).length).toBe(1);
-    });
-
     it('should set `inputValue` to an empty string if a false-y value is given', () => {
-      const wrapper = mount(<ComboBox {...mockProps} />);
-      expect(wrapper.find('input').instance().value).toBe('');
+      render(<ComboBox {...mockProps} />);
+
+      expect(findInputNode()).toHaveDisplayValue('');
     });
 
     it('should only render one listbox at a time when multiple comboboxes are present', () => {
diff --git a/packages/react/src/components/Dropdown/Dropdown-test.js b/packages/react/src/components/Dropdown/Dropdown-test.js
index 6e8e26df10be..b4adc91c994e 100644
--- a/packages/react/src/components/Dropdown/Dropdown-test.js
+++ b/packages/react/src/components/Dropdown/Dropdown-test.js
@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { cleanup, render } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen, cleanup } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import {
   assertMenuOpen,
   assertMenuClosed,
@@ -33,39 +33,38 @@ describe('Dropdown', () => {
     };
   });
 
-  it('should render', () => {
-    const wrapper = mount(<Dropdown {...mockProps} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
   it('should initially render with the menu not open', () => {
-    const wrapper = mount(<Dropdown {...mockProps} />);
-    assertMenuClosed(wrapper);
+    render(<Dropdown {...mockProps} />);
+    assertMenuClosed();
   });
 
   it('should let the user open the menu by clicking on the control', () => {
-    const wrapper = mount(<Dropdown {...mockProps} />);
-    openMenu(wrapper);
-    assertMenuOpen(wrapper, mockProps);
+    render(<Dropdown {...mockProps} />);
+    openMenu();
+    assertMenuOpen(mockProps);
   });
 
   it('should render with strings as items', () => {
-    const wrapper = mount(<Dropdown {...mockProps} items={['zar', 'doz']} />);
-    openMenu(wrapper);
-    expect(wrapper).toMatchSnapshot();
+    render(<Dropdown {...mockProps} items={['zar', 'doz']} />);
+    openMenu();
+
+    expect(screen.getByText('zar')).toBeInTheDocument();
+    expect(screen.getByText('doz')).toBeInTheDocument();
   });
 
   it('should render custom item components', () => {
-    const wrapper = mount(<Dropdown {...mockProps} />);
-    wrapper.setProps({
-      itemToElement: (item) => <div className="mock-item">{item.label}</div>,
+    const itemToElement = jest.fn((item) => {
+      return <div className="mock-item">{item.label}</div>;
     });
-    openMenu(wrapper);
-    expect(wrapper).toMatchSnapshot();
+
+    render(<Dropdown itemToElement={itemToElement} {...mockProps} />);
+    openMenu();
+
+    expect(itemToElement).toHaveBeenCalled();
   });
 
   it('should render selectedItem as an element', () => {
-    const wrapper = mount(
+    render(
       <Dropdown
         {...mockProps}
         selectedItem={{
@@ -81,47 +80,34 @@ describe('Dropdown', () => {
       />
     );
     // custom element should be rendered for the selected item
-    expect(wrapper.find('#a-custom-element-for-selected-item')).toHaveLength(1);
+    expect(
+      document.querySelector('#a-custom-element-for-selected-item')
+    ).toBeDefined();
     // the title should use the normal itemToString method
-    expect(wrapper.find('button').instance()).toHaveAttribute(
-      'title',
-      'Item 1'
-    );
+
+    expect(screen.getByText('Item 1')).toBeInTheDocument();
   });
 
   describe('title', () => {
-    let wrapper;
-    let renderedLabel;
-
-    beforeEach(() => {
-      wrapper = mount(<Dropdown titleText="Email Input" {...mockProps} />);
-      renderedLabel = wrapper.find('label[className="cds--label"]');
-    });
-
     it('renders a title', () => {
-      expect(renderedLabel.length).toBe(1);
+      render(<Dropdown titleText="Email Input" {...mockProps} />);
+      expect(screen.getByText('Email Input')).toBeInTheDocument();
     });
 
     it('has the expected classes', () => {
-      expect(renderedLabel.hasClass(`${prefix}--label`)).toEqual(true);
-    });
-
-    it('should set title as expected', () => {
-      expect(renderedLabel.text()).toEqual('Email Input');
+      render(<Dropdown titleText="Email Input" {...mockProps} />);
+      expect(screen.getByText('Email Input')).toHaveClass(`${prefix}--label`);
     });
   });
 
   describe('helper', () => {
     it('renders a helper', () => {
-      const wrapper = mount(
-        <Dropdown helperText="Email Input" {...mockProps} />
-      );
-      const renderedHelper = wrapper.find(`.${prefix}--form__helper-text`);
-      expect(renderedHelper.length).toEqual(1);
+      render(<Dropdown helperText="Email Input" {...mockProps} />);
+      expect(screen.getByText('Email Input')).toBeInTheDocument();
     });
 
     it('renders children as expected', () => {
-      const wrapper = mount(
+      render(
         <Dropdown
           helperText={
             <span>
@@ -131,43 +117,35 @@ describe('Dropdown', () => {
           {...mockProps}
         />
       );
-      const renderedHelper = wrapper.find(`.${prefix}--form__helper-text`);
-      expect(renderedHelper.props().children).toEqual(
-        <span>
-          This helper text has <a href="/">a link</a>.
-        </span>
-      );
-    });
 
-    it('should set helper text as expected', () => {
-      const wrapper = mount(<Dropdown {...mockProps} />);
-      wrapper.setProps({ helperText: 'Helper text' });
-      const renderedHelper = wrapper.find(`.${prefix}--form__helper-text`);
-      expect(renderedHelper.text()).toEqual('Helper text');
+      expect(screen.getByRole('link')).toBeInTheDocument();
     });
   });
 
   it('should specify light version as expected', () => {
-    const wrapper = mount(<Dropdown {...mockProps} />);
-    expect(wrapper.props().light).toEqual(false);
-    wrapper.setProps({ light: true });
-    expect(wrapper.props().light).toEqual(true);
+    render(<Dropdown light={true} {...mockProps} />);
+
+    expect(document.querySelector('.cds--list-box')).toHaveClass(
+      'cds--dropdown--light'
+    );
   });
 
   it('should let the user select an option by clicking on the option node', () => {
-    const wrapper = mount(<Dropdown {...mockProps} />);
-    openMenu(wrapper);
-    wrapper.find('ListBoxMenuItem').at(0).simulate('click');
+    render(<Dropdown {...mockProps} />);
+    openMenu();
+
+    userEvent.click(screen.getByText('Item 0'));
     expect(mockProps.onChange).toHaveBeenCalledTimes(1);
     expect(mockProps.onChange).toHaveBeenCalledWith({
       selectedItem: mockProps.items[0],
     });
-    assertMenuClosed(wrapper);
+    assertMenuClosed();
 
     mockProps.onChange.mockClear();
 
-    openMenu(wrapper);
-    wrapper.find('ListBoxMenuItem').at(1).simulate('click');
+    openMenu();
+    userEvent.click(screen.getByText('Item 1'));
+
     expect(mockProps.onChange).toHaveBeenCalledTimes(1);
     expect(mockProps.onChange).toHaveBeenCalledWith({
       selectedItem: mockProps.items[1],
@@ -176,13 +154,11 @@ describe('Dropdown', () => {
 
   describe('should display initially selected item found in `initialSelectedItem`', () => {
     it('using an object type for the `initialSelectedItem` prop', () => {
-      const wrapper = mount(
+      render(
         <Dropdown {...mockProps} initialSelectedItem={mockProps.items[0]} />
       );
 
-      expect(wrapper.find(`span.${prefix}--list-box__label`).text()).toEqual(
-        mockProps.items[0].label
-      );
+      expect(screen.getByText(mockProps.items[0].label)).toBeInTheDocument();
     });
 
     it('using a string type for the `initialSelectedItem` prop', () => {
@@ -192,13 +168,11 @@ describe('Dropdown', () => {
         items: ['1', '2', '3'],
       };
 
-      const wrapper = mount(
+      render(
         <Dropdown {...mockProps} initialSelectedItem={mockProps.items[1]} />
       );
 
-      expect(wrapper.find(`span.${prefix}--list-box__label`).text()).toEqual(
-        mockProps.items[1]
-      );
+      expect(screen.getByText(mockProps.items[1])).toBeInTheDocument();
     });
   });
 
@@ -216,14 +190,9 @@ describe('Dropdown', () => {
 describe('DropdownSkeleton', () => {
   describe('Renders as expected', () => {
     it('Has the expected classes', () => {
-      const wrapper = mount(<DropdownSkeleton size="sm" />);
-      expect(wrapper.childAt(0).hasClass(`${prefix}--skeleton`)).toEqual(true);
-      expect(wrapper.childAt(0).hasClass(`${prefix}--dropdown-v2`)).toEqual(
-        true
-      );
-      expect(wrapper.childAt(0).hasClass(`${prefix}--list-box--sm`)).toEqual(
-        true
-      );
+      render(<DropdownSkeleton size="sm" />);
+
+      expect(document.querySelector(`${prefix}--skeleton`)).toBeDefined();
     });
   });
 });
diff --git a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
deleted file mode 100644
index 368e56917620..000000000000
--- a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
+++ /dev/null
@@ -1,663 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Dropdown should render 1`] = `
-<Dropdown
-  direction="bottom"
-  disabled={false}
-  helperText=""
-  id="test-dropdown"
-  itemToElement={null}
-  itemToString={[Function]}
-  items={
-    Array [
-      Object {
-        "id": "id-0",
-        "label": "Item 0",
-        "value": 0,
-      },
-      Object {
-        "id": "id-1",
-        "label": "Item 1",
-        "value": 1,
-      },
-      Object {
-        "id": "id-2",
-        "label": "Item 2",
-        "value": 2,
-      },
-      Object {
-        "id": "id-3",
-        "label": "Item 3",
-        "value": 3,
-      },
-      Object {
-        "id": "id-4",
-        "label": "Item 4",
-        "value": 4,
-      },
-    ]
-  }
-  label="input"
-  light={false}
-  onChange={[MockFunction]}
-  placeholder="Filter..."
-  titleText=""
-  type="default"
->
-  <div
-    className="cds--dropdown__wrapper cds--list-box__wrapper"
-    placeholder="Filter..."
-  >
-    <ListBox
-      className="cds--dropdown"
-      disabled={false}
-      id="test-dropdown"
-      isOpen={false}
-      light={false}
-      type="default"
-    >
-      <div
-        className="cds--dropdown cds--list-box"
-        id="test-dropdown"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-      >
-        <button
-          aria-disabled={false}
-          aria-expanded={false}
-          aria-haspopup="listbox"
-          aria-labelledby="downshift-0-label downshift-0-toggle-button"
-          className="cds--list-box__field"
-          disabled={false}
-          id="downshift-0-toggle-button"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          title="input"
-          type="button"
-        >
-          <span
-            className="cds--list-box__label"
-          >
-            input
-          </span>
-          <ListBoxMenuIcon
-            isOpen={false}
-            translateWithId={[Function]}
-          >
-            <div
-              className="cds--list-box__menu-icon"
-            >
-              <ForwardRef(ChevronDown)
-                aria-label="Open menu"
-                name="chevron--down"
-              >
-                <Icon
-                  aria-label="Open menu"
-                  fill="currentColor"
-                  height={16}
-                  name="chevron--down"
-                  preserveAspectRatio="xMidYMid meet"
-                  viewBox="0 0 16 16"
-                  width={16}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <svg
-                    aria-label="Open menu"
-                    fill="currentColor"
-                    focusable="false"
-                    height={16}
-                    name="chevron--down"
-                    preserveAspectRatio="xMidYMid meet"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width={16}
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
-                    />
-                    <title>
-                      Open menu
-                    </title>
-                  </svg>
-                </Icon>
-              </ForwardRef(ChevronDown)>
-            </div>
-          </ListBoxMenuIcon>
-        </button>
-        <ListBoxMenu
-          aria-labelledby="downshift-0-label"
-          id="downshift-0-menu"
-          onBlur={[Function]}
-          onKeyDown={[Function]}
-          onMouseLeave={[Function]}
-          role="listbox"
-          tabIndex={-1}
-        >
-          <div
-            aria-labelledby="downshift-0-label"
-            className="cds--list-box__menu"
-            id="downshift-0-menu"
-            onBlur={[Function]}
-            onKeyDown={[Function]}
-            onMouseLeave={[Function]}
-            role="listbox"
-            tabIndex={-1}
-          />
-        </ListBoxMenu>
-      </div>
-    </ListBox>
-  </div>
-</Dropdown>
-`;
-
-exports[`Dropdown should render custom item components 1`] = `
-<Dropdown
-  direction="bottom"
-  disabled={false}
-  helperText=""
-  id="test-dropdown"
-  itemToElement={[Function]}
-  itemToString={[Function]}
-  items={
-    Array [
-      Object {
-        "id": "id-0",
-        "label": "Item 0",
-        "value": 0,
-      },
-      Object {
-        "id": "id-1",
-        "label": "Item 1",
-        "value": 1,
-      },
-      Object {
-        "id": "id-2",
-        "label": "Item 2",
-        "value": 2,
-      },
-      Object {
-        "id": "id-3",
-        "label": "Item 3",
-        "value": 3,
-      },
-      Object {
-        "id": "id-4",
-        "label": "Item 4",
-        "value": 4,
-      },
-    ]
-  }
-  label="input"
-  light={false}
-  onChange={[MockFunction]}
-  placeholder="Filter..."
-  titleText=""
-  type="default"
->
-  <div
-    className="cds--dropdown__wrapper cds--list-box__wrapper"
-    placeholder="Filter..."
-  >
-    <ListBox
-      className="cds--dropdown cds--dropdown--open"
-      disabled={false}
-      id="test-dropdown"
-      isOpen={true}
-      light={false}
-      type="default"
-    >
-      <div
-        className="cds--dropdown cds--dropdown--open cds--list-box cds--list-box--expanded"
-        id="test-dropdown"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-      >
-        <button
-          aria-disabled={false}
-          aria-expanded={true}
-          aria-haspopup="listbox"
-          aria-labelledby="downshift-6-label downshift-6-toggle-button"
-          className="cds--list-box__field"
-          disabled={false}
-          id="downshift-6-toggle-button"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          title="input"
-          type="button"
-        >
-          <span
-            className="cds--list-box__label"
-          >
-            input
-          </span>
-          <ListBoxMenuIcon
-            isOpen={true}
-            translateWithId={[Function]}
-          >
-            <div
-              className="cds--list-box__menu-icon cds--list-box__menu-icon--open"
-            >
-              <ForwardRef(ChevronDown)
-                aria-label="Close menu"
-                name="chevron--down"
-              >
-                <Icon
-                  aria-label="Close menu"
-                  fill="currentColor"
-                  height={16}
-                  name="chevron--down"
-                  preserveAspectRatio="xMidYMid meet"
-                  viewBox="0 0 16 16"
-                  width={16}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <svg
-                    aria-label="Close menu"
-                    fill="currentColor"
-                    focusable="false"
-                    height={16}
-                    name="chevron--down"
-                    preserveAspectRatio="xMidYMid meet"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width={16}
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
-                    />
-                    <title>
-                      Close menu
-                    </title>
-                  </svg>
-                </Icon>
-              </ForwardRef(ChevronDown)>
-            </div>
-          </ListBoxMenuIcon>
-        </button>
-        <ListBoxMenu
-          aria-labelledby="downshift-6-label"
-          id="downshift-6-menu"
-          onBlur={[Function]}
-          onKeyDown={[Function]}
-          onMouseLeave={[Function]}
-          role="listbox"
-          tabIndex={-1}
-        >
-          <div
-            aria-labelledby="downshift-6-label"
-            className="cds--list-box__menu"
-            id="downshift-6-menu"
-            onBlur={[Function]}
-            onKeyDown={[Function]}
-            onMouseLeave={[Function]}
-            role="listbox"
-            tabIndex={-1}
-          >
-            <ListBoxMenuItem
-              aria-selected="false"
-              id="downshift-6-item-0"
-              isActive={false}
-              isHighlighted={false}
-              key="downshift-6-item-0"
-              onClick={[Function]}
-              onMouseMove={[Function]}
-              role="option"
-            >
-              <div
-                aria-selected="false"
-                className="cds--list-box__menu-item"
-                id="downshift-6-item-0"
-                onClick={[Function]}
-                onMouseMove={[Function]}
-                role="option"
-              >
-                <div
-                  className="cds--list-box__menu-item__option"
-                >
-                  <itemToElement
-                    id="id-0"
-                    key="downshift-6-item-0"
-                    label="Item 0"
-                    value={0}
-                  >
-                    <div
-                      className="mock-item"
-                    >
-                      Item 0
-                    </div>
-                  </itemToElement>
-                </div>
-              </div>
-            </ListBoxMenuItem>
-            <ListBoxMenuItem
-              aria-selected="false"
-              id="downshift-6-item-1"
-              isActive={false}
-              isHighlighted={false}
-              key="downshift-6-item-1"
-              onClick={[Function]}
-              onMouseMove={[Function]}
-              role="option"
-            >
-              <div
-                aria-selected="false"
-                className="cds--list-box__menu-item"
-                id="downshift-6-item-1"
-                onClick={[Function]}
-                onMouseMove={[Function]}
-                role="option"
-              >
-                <div
-                  className="cds--list-box__menu-item__option"
-                >
-                  <itemToElement
-                    id="id-1"
-                    key="downshift-6-item-1"
-                    label="Item 1"
-                    value={1}
-                  >
-                    <div
-                      className="mock-item"
-                    >
-                      Item 1
-                    </div>
-                  </itemToElement>
-                </div>
-              </div>
-            </ListBoxMenuItem>
-            <ListBoxMenuItem
-              aria-selected="false"
-              id="downshift-6-item-2"
-              isActive={false}
-              isHighlighted={false}
-              key="downshift-6-item-2"
-              onClick={[Function]}
-              onMouseMove={[Function]}
-              role="option"
-            >
-              <div
-                aria-selected="false"
-                className="cds--list-box__menu-item"
-                id="downshift-6-item-2"
-                onClick={[Function]}
-                onMouseMove={[Function]}
-                role="option"
-              >
-                <div
-                  className="cds--list-box__menu-item__option"
-                >
-                  <itemToElement
-                    id="id-2"
-                    key="downshift-6-item-2"
-                    label="Item 2"
-                    value={2}
-                  >
-                    <div
-                      className="mock-item"
-                    >
-                      Item 2
-                    </div>
-                  </itemToElement>
-                </div>
-              </div>
-            </ListBoxMenuItem>
-            <ListBoxMenuItem
-              aria-selected="false"
-              id="downshift-6-item-3"
-              isActive={false}
-              isHighlighted={false}
-              key="downshift-6-item-3"
-              onClick={[Function]}
-              onMouseMove={[Function]}
-              role="option"
-            >
-              <div
-                aria-selected="false"
-                className="cds--list-box__menu-item"
-                id="downshift-6-item-3"
-                onClick={[Function]}
-                onMouseMove={[Function]}
-                role="option"
-              >
-                <div
-                  className="cds--list-box__menu-item__option"
-                >
-                  <itemToElement
-                    id="id-3"
-                    key="downshift-6-item-3"
-                    label="Item 3"
-                    value={3}
-                  >
-                    <div
-                      className="mock-item"
-                    >
-                      Item 3
-                    </div>
-                  </itemToElement>
-                </div>
-              </div>
-            </ListBoxMenuItem>
-            <ListBoxMenuItem
-              aria-selected="false"
-              id="downshift-6-item-4"
-              isActive={false}
-              isHighlighted={false}
-              key="downshift-6-item-4"
-              onClick={[Function]}
-              onMouseMove={[Function]}
-              role="option"
-            >
-              <div
-                aria-selected="false"
-                className="cds--list-box__menu-item"
-                id="downshift-6-item-4"
-                onClick={[Function]}
-                onMouseMove={[Function]}
-                role="option"
-              >
-                <div
-                  className="cds--list-box__menu-item__option"
-                >
-                  <itemToElement
-                    id="id-4"
-                    key="downshift-6-item-4"
-                    label="Item 4"
-                    value={4}
-                  >
-                    <div
-                      className="mock-item"
-                    >
-                      Item 4
-                    </div>
-                  </itemToElement>
-                </div>
-              </div>
-            </ListBoxMenuItem>
-          </div>
-        </ListBoxMenu>
-      </div>
-    </ListBox>
-  </div>
-</Dropdown>
-`;
-
-exports[`Dropdown should render with strings as items 1`] = `
-<Dropdown
-  direction="bottom"
-  disabled={false}
-  helperText=""
-  id="test-dropdown"
-  itemToElement={null}
-  itemToString={[Function]}
-  items={
-    Array [
-      "zar",
-      "doz",
-    ]
-  }
-  label="input"
-  light={false}
-  onChange={[MockFunction]}
-  placeholder="Filter..."
-  titleText=""
-  type="default"
->
-  <div
-    className="cds--dropdown__wrapper cds--list-box__wrapper"
-    placeholder="Filter..."
-  >
-    <ListBox
-      className="cds--dropdown cds--dropdown--open"
-      disabled={false}
-      id="test-dropdown"
-      isOpen={true}
-      light={false}
-      type="default"
-    >
-      <div
-        className="cds--dropdown cds--dropdown--open cds--list-box cds--list-box--expanded"
-        id="test-dropdown"
-        onClick={[Function]}
-        onKeyDown={[Function]}
-      >
-        <button
-          aria-disabled={false}
-          aria-expanded={true}
-          aria-haspopup="listbox"
-          aria-labelledby="downshift-4-label downshift-4-toggle-button"
-          className="cds--list-box__field"
-          disabled={false}
-          id="downshift-4-toggle-button"
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          title="input"
-          type="button"
-        >
-          <span
-            className="cds--list-box__label"
-          >
-            input
-          </span>
-          <ListBoxMenuIcon
-            isOpen={true}
-            translateWithId={[Function]}
-          >
-            <div
-              className="cds--list-box__menu-icon cds--list-box__menu-icon--open"
-            >
-              <ForwardRef(ChevronDown)
-                aria-label="Close menu"
-                name="chevron--down"
-              >
-                <Icon
-                  aria-label="Close menu"
-                  fill="currentColor"
-                  height={16}
-                  name="chevron--down"
-                  preserveAspectRatio="xMidYMid meet"
-                  viewBox="0 0 16 16"
-                  width={16}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <svg
-                    aria-label="Close menu"
-                    fill="currentColor"
-                    focusable="false"
-                    height={16}
-                    name="chevron--down"
-                    preserveAspectRatio="xMidYMid meet"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width={16}
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
-                    />
-                    <title>
-                      Close menu
-                    </title>
-                  </svg>
-                </Icon>
-              </ForwardRef(ChevronDown)>
-            </div>
-          </ListBoxMenuIcon>
-        </button>
-        <ListBoxMenu
-          aria-labelledby="downshift-4-label"
-          id="downshift-4-menu"
-          onBlur={[Function]}
-          onKeyDown={[Function]}
-          onMouseLeave={[Function]}
-          role="listbox"
-          tabIndex={-1}
-        >
-          <div
-            aria-labelledby="downshift-4-label"
-            className="cds--list-box__menu"
-            id="downshift-4-menu"
-            onBlur={[Function]}
-            onKeyDown={[Function]}
-            onMouseLeave={[Function]}
-            role="listbox"
-            tabIndex={-1}
-          >
-            <ListBoxMenuItem
-              aria-selected="false"
-              id="downshift-4-item-0"
-              isActive={false}
-              isHighlighted={false}
-              key="downshift-4-item-0"
-              onClick={[Function]}
-              onMouseMove={[Function]}
-              role="option"
-            >
-              <div
-                aria-selected="false"
-                className="cds--list-box__menu-item"
-                id="downshift-4-item-0"
-                onClick={[Function]}
-                onMouseMove={[Function]}
-                role="option"
-              >
-                <div
-                  className="cds--list-box__menu-item__option"
-                >
-                  zar
-                </div>
-              </div>
-            </ListBoxMenuItem>
-            <ListBoxMenuItem
-              aria-selected="false"
-              id="downshift-4-item-1"
-              isActive={false}
-              isHighlighted={false}
-              key="downshift-4-item-1"
-              onClick={[Function]}
-              onMouseMove={[Function]}
-              role="option"
-            >
-              <div
-                aria-selected="false"
-                className="cds--list-box__menu-item"
-                id="downshift-4-item-1"
-                onClick={[Function]}
-                onMouseMove={[Function]}
-                role="option"
-              >
-                <div
-                  className="cds--list-box__menu-item__option"
-                >
-                  doz
-                </div>
-              </div>
-            </ListBoxMenuItem>
-          </div>
-        </ListBoxMenu>
-      </div>
-    </ListBox>
-  </div>
-</Dropdown>
-`;
diff --git a/packages/react/src/components/ListBox/test-helpers.js b/packages/react/src/components/ListBox/test-helpers.js
index d454370cc55a..ad45c27f49e1 100644
--- a/packages/react/src/components/ListBox/test-helpers.js
+++ b/packages/react/src/components/ListBox/test-helpers.js
@@ -6,42 +6,64 @@
  */
 
 const prefix = 'cds';
+import userEvent from '@testing-library/user-event';
 
 // Finding nodes in a ListBox
-export const findListBoxNode = (wrapper) =>
-  wrapper.find(`.${prefix}--list-box`);
-export const findMenuNode = (wrapper) =>
-  wrapper.find(`.${prefix}--list-box__menu`);
-export const findMenuItemNode = (wrapper, index) =>
-  wrapper.find('ListBoxMenuItem').at(index);
-export const findMenuIconNode = (wrapper) =>
-  wrapper.find(`.${prefix}--list-box__menu-icon`);
-export const findFieldNode = (wrapper) =>
-  wrapper.find(`.${prefix}--list-box__field`);
-export const findComboboxNode = (wrapper) =>
-  wrapper.find(`.${prefix}--list-box[role="combobox"]`);
-export const findPopupNode = (wrapper) =>
-  wrapper.find('[aria-haspopup="listbox"]').hostNodes();
+export const findListBoxNode = () => {
+  return document.querySelector('.cds--list-box');
+};
+
+export const findMenuNode = () => {
+  return document.querySelector(`.${prefix}--list-box__menu`);
+};
+
+export const findMenuItemNode = (index) => {
+  const nodes = document.querySelectorAll(`.${prefix}--list-box__menu-item`);
+  if (nodes[index]) {
+    return nodes[index];
+  }
+  throw new Error(`Unable to find node at index: ${index} in: ${nodes}`);
+};
+
+export const findMenuIconNode = () => {
+  return document.querySelector(`.${prefix}--list-box__menu-icon`);
+};
+
+export const findFieldNode = () => {
+  return document.querySelector(`.${prefix}--list-box__field`);
+};
+
+export const findComboboxNode = () => {
+  return document.querySelector(`.${prefix}--list-box[role="combobox"]`);
+};
+
+export const findPopupNode = () => {
+  return document.querySelector('[aria-haspopup="listbox"]');
+};
 
 // Actions
-export const openMenu = (wrapper) => findFieldNode(wrapper).simulate('click');
+export const openMenu = () => {
+  userEvent.click(findFieldNode());
+};
 
 // Common assertions, useful for validating a11y props are set when needed
-export const assertMenuOpen = (wrapper, mockProps) => {
-  expect(findMenuNode(wrapper).children().length).toBe(mockProps.items.length);
-  expect(findMenuIconNode(wrapper).prop('className')).toEqual(
-    expect.stringContaining(`${prefix}--list-box__menu-icon--open`)
+export const assertMenuOpen = (mockProps) => {
+  expect(findMenuNode().childNodes.length).toBe(mockProps.items.length);
+
+  expect(findMenuIconNode()).toHaveClass(
+    `${prefix}--list-box__menu-icon--open`
   );
-  expect(findPopupNode(wrapper).prop('aria-expanded')).toBe(true);
+
+  expect(findPopupNode()).toHaveAttribute('aria-expanded', 'true');
 };
-export const assertMenuClosed = (wrapper) => {
-  expect(findMenuIconNode(wrapper).prop('className')).toEqual(
-    expect.stringContaining(`${prefix}--list-box__menu-icon`)
-  );
-  expect(findMenuIconNode(wrapper).prop('className')).not.toEqual(
-    expect.stringContaining(`${prefix}--list-box__menu-icon--open`)
+
+export const assertMenuClosed = () => {
+  expect(findMenuIconNode()).toHaveClass(`${prefix}--list-box__menu-icon`);
+
+  expect(findMenuIconNode()).not.toHaveClass(
+    `${prefix}--list-box__menu-icon--open`
   );
-  expect(findPopupNode(wrapper).prop('aria-expanded')).toBe(false);
+  expect(findPopupNode()).toHaveAttribute('aria-expanded', 'false');
 };
 
 /**
diff --git a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
index 633ffa3f5e76..ce474b6214f6 100644
--- a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
@@ -6,7 +6,8 @@
  */
 
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import FilterableMultiSelect from '../FilterableMultiSelect';
 import {
   assertMenuOpen,
@@ -16,9 +17,8 @@ import {
   generateGenericItem,
 } from '../../ListBox/test-helpers';
 
-const listItemName = 'ListBoxMenuItem';
-const openMenu = (wrapper) => {
-  wrapper.find(`[role="combobox"]`).simulate('click');
+const openMenu = () => {
+  userEvent.click(screen.getByRole('combobox'));
 };
 
 describe('FilterableMultiSelect', () => {
@@ -36,76 +36,67 @@ describe('FilterableMultiSelect', () => {
     };
   });
 
-  it('should render', () => {
-    const wrapper = mount(<FilterableMultiSelect {...mockProps} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('should display all items when the menu is open initially', () => {
-    const wrapper = mount(<FilterableMultiSelect {...mockProps} />);
-    openMenu(wrapper);
-    expect(wrapper.find(listItemName).length).toBe(mockProps.items.length);
+  it('should display all items when the menu is open', () => {
+    render(<FilterableMultiSelect {...mockProps} />);
+    openMenu();
+    expect(screen.getAllByRole('option').length).toBe(mockProps.items.length);
   });
 
   it('should initially have the menu open when open prop is provided', () => {
-    const wrapper = mount(<FilterableMultiSelect {...mockProps} open />);
-    assertMenuOpen(wrapper, mockProps);
+    render(<FilterableMultiSelect {...mockProps} open />);
+    assertMenuOpen(mockProps);
   });
 
   it('should open the menu with a down arrow', () => {
-    const wrapper = mount(<FilterableMultiSelect {...mockProps} />);
-    const menuIconNode = findMenuIconNode(wrapper);
+    render(<FilterableMultiSelect {...mockProps} />);
+    const menuIconNode = findMenuIconNode();
 
-    menuIconNode.simulate('keyDown', { key: 'ArrowDown' });
-    assertMenuOpen(wrapper, mockProps);
+    userEvent.type(menuIconNode, '{arrowdown}');
+    expect(screen.getAllByRole('option').length).toBe(mockProps.items.length);
   });
 
   it('should let the user toggle the menu by the menu icon', () => {
-    const wrapper = mount(<FilterableMultiSelect {...mockProps} />);
-    findMenuIconNode(wrapper).simulate('click');
-    assertMenuOpen(wrapper, mockProps);
-    findMenuIconNode(wrapper).simulate('click');
-    assertMenuClosed(wrapper);
+    render(<FilterableMultiSelect {...mockProps} />);
+    userEvent.click(findMenuIconNode());
+
+    assertMenuOpen(mockProps);
+    userEvent.click(findMenuIconNode());
+
+    assertMenuClosed();
   });
 
   it('should not close the menu after a user makes a selection', () => {
-    const wrapper = mount(<FilterableMultiSelect {...mockProps} />);
-    openMenu(wrapper);
+    render(<FilterableMultiSelect {...mockProps} />);
+    openMenu();
 
-    const firstListItem = wrapper.find(listItemName).at(0);
+    userEvent.click(screen.getAllByRole('option')[0]);
 
-    firstListItem.simulate('click');
-    assertMenuOpen(wrapper, mockProps);
+    assertMenuOpen(mockProps);
   });
 
   it('should filter a list of items by the input value', () => {
-    const wrapper = mount(<FilterableMultiSelect {...mockProps} />);
-    openMenu(wrapper);
-    expect(wrapper.find(listItemName).length).toBe(mockProps.items.length);
+    render(<FilterableMultiSelect {...mockProps} placeholder="test" />);
+    openMenu();
+    expect(screen.getAllByRole('option').length).toBe(mockProps.items.length);
 
-    wrapper
-      .find('[placeholder="Placeholder..."]')
-      .at(1)
-      .simulate('change', { target: { value: '3' } });
+    userEvent.type(screen.getByPlaceholderText('test'), '3');
 
-    expect(wrapper.find(listItemName).length).toBe(1);
+    expect(screen.getAllByRole('option').length).toBe(1);
   });
 
   it('should call `onChange` with each update to selected items', () => {
-    const wrapper = mount(
-      <FilterableMultiSelect {...mockProps} selectionFeedback="top" />
-    );
-    openMenu(wrapper);
+    render(<FilterableMultiSelect {...mockProps} selectionFeedback="top" />);
+    openMenu();
 
     // Select the first two items
-    wrapper.find(listItemName).at(0).simulate('click');
+    userEvent.click(screen.getAllByRole('option')[0]);
 
     expect(mockProps.onChange).toHaveBeenCalledTimes(1);
     expect(mockProps.onChange).toHaveBeenCalledWith({
       selectedItems: [mockProps.items[0]],
     });
 
-    wrapper.find(listItemName).at(1).simulate('click');
+    userEvent.click(screen.getAllByRole('option')[1]);
 
     expect(mockProps.onChange).toHaveBeenCalledTimes(2);
     expect(mockProps.onChange).toHaveBeenCalledWith({
@@ -113,13 +104,13 @@ describe('FilterableMultiSelect', () => {
     });
 
     // Un-select the next two items
-    wrapper.find(listItemName).at(0).simulate('click');
+    userEvent.click(screen.getAllByRole('option')[0]);
     expect(mockProps.onChange).toHaveBeenCalledTimes(3);
     expect(mockProps.onChange).toHaveBeenCalledWith({
       selectedItems: [mockProps.items[0]],
     });
 
-    wrapper.find(listItemName).at(0).simulate('click');
+    userEvent.click(screen.getAllByRole('option')[0]);
     expect(mockProps.onChange).toHaveBeenCalledTimes(4);
     expect(mockProps.onChange).toHaveBeenCalledWith({
       selectedItems: [],
@@ -127,20 +118,18 @@ describe('FilterableMultiSelect', () => {
   });
 
   it('should let items stay at their position after selecting', () => {
-    const wrapper = mount(
-      <FilterableMultiSelect {...mockProps} selectionFeedback="fixed" />
-    );
-    openMenu(wrapper);
+    render(<FilterableMultiSelect {...mockProps} selectionFeedback="fixed" />);
+    openMenu();
 
     // Select the first two items
-    wrapper.find(listItemName).at(1).simulate('click');
+    userEvent.click(screen.getAllByRole('option')[1]);
 
     expect(mockProps.onChange).toHaveBeenCalledTimes(1);
     expect(mockProps.onChange).toHaveBeenCalledWith({
       selectedItems: [mockProps.items[1]],
     });
 
-    wrapper.find(listItemName).at(1).simulate('click');
+    userEvent.click(screen.getAllByRole('option')[1]);
 
     expect(mockProps.onChange).toHaveBeenCalledTimes(2);
     expect(mockProps.onChange).toHaveBeenCalledWith({
@@ -149,18 +138,13 @@ describe('FilterableMultiSelect', () => {
   });
 
   it('should not clear input value after a user makes a selection', () => {
-    const wrapper = mount(<FilterableMultiSelect {...mockProps} />);
-    openMenu(wrapper);
+    render(<FilterableMultiSelect {...mockProps} placeholder="test" />);
+    openMenu();
 
-    wrapper
-      .find('[placeholder="Placeholder..."]')
-      .at(1)
-      .simulate('change', { target: { value: '3' } });
+    userEvent.type(screen.getByPlaceholderText('test'), '3');
 
-    wrapper.find(listItemName).at(0).simulate('click');
+    userEvent.click(screen.getAllByRole('option')[0]);
 
-    expect(
-      wrapper.find('[placeholder="Placeholder..."]').at(1).props().value
-    ).toEqual('3');
+    expect(screen.getByPlaceholderText('test')).toHaveDisplayValue(3);
   });
 });
diff --git a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap b/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap
deleted file mode 100644
index 166398a5594e..000000000000
--- a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap
+++ /dev/null
@@ -1,187 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FilterableMultiSelect should render 1`] = `
-<ForwardRef(FilterableMultiSelect)
-  ariaLabel="Choose an item"
-  compareItems={[Function]}
-  direction="bottom"
-  disabled={false}
-  filterItems={[Function]}
-  id="test-filterable-multiselect"
-  initialSelectedItems={Array []}
-  itemToString={[Function]}
-  items={
-    Array [
-      Object {
-        "id": "id-0",
-        "label": "Item 0",
-        "value": 0,
-      },
-      Object {
-        "id": "id-1",
-        "label": "Item 1",
-        "value": 1,
-      },
-      Object {
-        "id": "id-2",
-        "label": "Item 2",
-        "value": 2,
-      },
-      Object {
-        "id": "id-3",
-        "label": "Item 3",
-        "value": 3,
-      },
-      Object {
-        "id": "id-4",
-        "label": "Item 4",
-        "value": 4,
-      },
-    ]
-  }
-  light={false}
-  locale="en"
-  onChange={[MockFunction]}
-  onMenuChange={[MockFunction]}
-  open={false}
-  placeholder="Placeholder..."
-  selectionFeedback="top-after-reopen"
-  sortItems={[Function]}
->
-  <Selection
-    disabled={false}
-    initialSelectedItems={Array []}
-    onChange={[Function]}
-    render={[Function]}
-  >
-    <Downshift
-      defaultHighlightedIndex={null}
-      defaultIsOpen={false}
-      environment={[Window]}
-      getA11yStatusMessage={[Function]}
-      highlightedIndex={null}
-      id="test-filterable-multiselect"
-      inputId="test-filterable-multiselect-input"
-      inputValue=""
-      isOpen={false}
-      itemToString={[Function]}
-      labelId="test-filterable-multiselect-label"
-      menuId="test-filterable-multiselect__menu"
-      onChange={[Function]}
-      onInputValueChange={[Function]}
-      onOuterClick={[Function]}
-      onSelect={[Function]}
-      onStateChange={[Function]}
-      onUserAction={[Function]}
-      scrollIntoView={[Function]}
-      selectedItem={Array []}
-      selectedItemChanged={[Function]}
-      stateReducer={[Function]}
-      suppressRefError={false}
-    >
-      <div
-        className="cds--multi-select__wrapper cds--list-box__wrapper"
-      >
-        <ListBox
-          className="cds--multi-select cds--combo-box cds--multi-select--filterable"
-          disabled={false}
-          isOpen={false}
-          light={false}
-          type="default"
-        >
-          <div
-            className="cds--multi-select cds--combo-box cds--multi-select--filterable cds--list-box"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-          >
-            <div
-              className="cds--list-box__field"
-            >
-              <input
-                aria-activedescendant={null}
-                aria-autocomplete="list"
-                aria-controls={null}
-                aria-describedby={null}
-                aria-expanded={false}
-                aria-haspopup="listbox"
-                aria-labelledby={null}
-                aria-owns={null}
-                autoComplete="off"
-                className="cds--text-input cds--text-input--empty"
-                disabled={false}
-                id="test-filterable-multiselect-input"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                placeholder="Placeholder..."
-                role="combobox"
-                value=""
-              />
-              <ListBoxTrigger
-                aria-haspopup={true}
-                aria-label="open menu"
-                data-toggle={true}
-                disabled={false}
-                isOpen={false}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseUp={[Function]}
-                role="button"
-                translateWithId={[Function]}
-                type="button"
-              >
-                <button
-                  aria-haspopup={true}
-                  aria-label="Open"
-                  className="cds--list-box__menu-icon"
-                  data-toggle={true}
-                  disabled={false}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onKeyDown={[Function]}
-                  onKeyUp={[Function]}
-                  onMouseUp={[Function]}
-                  role="button"
-                  tabIndex="-1"
-                  title="Open"
-                  type="button"
-                >
-                  <ForwardRef(ChevronDown)>
-                    <Icon
-                      fill="currentColor"
-                      height={16}
-                      preserveAspectRatio="xMidYMid meet"
-                      viewBox="0 0 16 16"
-                      width={16}
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <svg
-                        aria-hidden={true}
-                        fill="currentColor"
-                        focusable="false"
-                        height={16}
-                        preserveAspectRatio="xMidYMid meet"
-                        viewBox="0 0 16 16"
-                        width={16}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
-                        />
-                      </svg>
-                    </Icon>
-                  </ForwardRef(ChevronDown)>
-                </button>
-              </ListBoxTrigger>
-            </div>
-          </div>
-        </ListBox>
-      </div>
-    </Downshift>
-  </Selection>
-</ForwardRef(FilterableMultiSelect)>
-`;