@moda/om 16.0.0 → 16.2.0

package/src/components/ControlLink/ControlLink.test.tsx

@@ -1,27 +1,25 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { ControlLink } from './ControlLink';
 
 describe('ControlLink', () => {
   it('renders correctly', () => {
-    const component = shallow(<ControlLink> click me! </ControlLink>);
-    expect(component.html()).toEqual(
-      '<button class="Clickable ControlLink ControlLink--underlined"> click me! </button>'
-    );
+    render(<ControlLink> click me! </ControlLink>);
+    expect(screen.getByRole('button', { name: 'click me!' })).toBeVisible();
+    expect(screen.getByRole('button', { name: 'click me!' })).toBeEnabled();
   });
 
   it('renders correctly while disabled', () => {
-    const component = shallow(<ControlLink disabled> do not click me! </ControlLink>);
-    expect(component.html()).toEqual(
-      '<button class="Clickable Clickable--disabled ControlLink ControlLink--underlined ControlLink--disabled" disabled=""> do not click me! </button>'
-    );
+    render(<ControlLink disabled> do not click me! </ControlLink>);
+    expect(screen.getByRole('button', { name: 'do not click me!' })).toBeDisabled();
   });
 
   it('renders correctly while underlined', () => {
-    const component = shallow(<ControlLink underlined> click me! </ControlLink>);
-    expect(component.html()).toEqual(
-      '<button class="Clickable ControlLink ControlLink--underlined"> click me! </button>'
+    render(<ControlLink underlined> click me! </ControlLink>);
+    expect(screen.getByRole('button', { name: 'click me!' })).toBeVisible();
+    expect(screen.getByRole('button', { name: 'click me!' })).toHaveClass(
+      'ControlLink--underlined'
     );
   });
 });

package/src/components/CreditCardNumberInput/CreditCardNumberInput.test.tsx

@@ -1,41 +1,41 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { CreditCardNumberInput } from './CreditCardNumberInput';
 
 describe('credit card number input', () => {
   it('renders without errors', () => {
-    const { getByLabelText } = render(<CreditCardNumberInput label='Card Number' />);
-    const input = getByLabelText('Card Number');
-    expect(input).toBeTruthy();
+    render(<CreditCardNumberInput label='Card Number' />);
+    const input = screen.getByLabelText('Card Number');
+    expect(input).toBeInTheDocument();
   });
 
   // TODO: userEvent.type does not work here for some reason
-  xit('does not allow non-numeric characters', () => {
-    const { getByLabelText } = render(<CreditCardNumberInput label='Card Number' />);
-    const input = getByLabelText('Card Number') as HTMLInputElement;
+  xit('does not allow non-numeric characters', async () => {
+    render(<CreditCardNumberInput label='Card Number' />);
+    const input = screen.getByLabelText('Card Number') as HTMLInputElement;
 
-    userEvent.type(input, 'foo1234');
+    await userEvent.type(input, 'foo1234');
 
     expect(input.value).toBe('1234 ____ ____ ____');
   });
 
   // TODO: userEvent.type does not work here for some reason
-  xit('puts spaces between the numbers', () => {
-    const { getByLabelText } = render(<CreditCardNumberInput label='Card Number' />);
-    const input = getByLabelText('Card Number') as HTMLInputElement;
+  xit('puts spaces between the numbers', async () => {
+    render(<CreditCardNumberInput label='Card Number' />);
+    const input = screen.getByLabelText('Card Number') as HTMLInputElement;
 
-    userEvent.type(input, '5510000000000000');
+    await userEvent.type(input, '5510000000000000');
 
     expect(input.value).toBe('5510 0000 0000 0000');
   });
 
   // TODO: userEvent.type does not work here for some reason
-  xit('does not allow more characters than required', () => {
-    const { getByLabelText } = render(<CreditCardNumberInput label='Card Number' />);
-    const input = getByLabelText('Card Number') as HTMLInputElement;
+  xit('does not allow more characters than required', async () => {
+    render(<CreditCardNumberInput label='Card Number' />);
+    const input = screen.getByLabelText('Card Number') as HTMLInputElement;
 
-    userEvent.type(input, '5510000000000000251');
+    await userEvent.type(input, '5510000000000000251');
 
     expect(input.value).toBe('5510 0000 0000 0000');
   });

package/src/components/DefinitionList/DefinitionList.test.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { DefinitionList } from './DefinitionList';
 
 describe('DefinitionList', () => {
   it('renders correctly', () => {
-    const component = shallow(<DefinitionList term='Foo'>Bar</DefinitionList>);
-    expect(component.text()).toEqual('FooBar');
+    render(<DefinitionList term='Foo'>Bar</DefinitionList>);
+    expect(screen.getByText('Foo')).toBeVisible();
+    expect(screen.getByText('Bar')).toBeVisible();
   });
 });

package/src/components/Divider/Divider.test.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { Divider } from './Divider';
 
 describe('Divider', () => {
   it('renders correctly', () => {
-    const component = mount(<Divider style={{ padding: '30px 0' }} text='Hello' />);
-    expect(component.text()).toEqual('Hello');
-    expect(component.html()).toContain('style="padding: 30px 0px;"');
+    render(<Divider style={{ padding: '30px 0' }} text='Hello' />);
+    expect(screen.getByText('Hello')).toBeVisible();
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByText('Hello').parentNode).toHaveStyle('padding: 30px 0px;');
   });
 });

package/src/components/Expandable/Expandable.test.tsx

@@ -1,13 +1,24 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { Expandable } from './Expandable';
 
 describe('Expandable', () => {
-  it('expands when clicked', () => {
-    const component = mount(<Expandable name='Hello'>Goodbye</Expandable>);
-    expect(component.html()).not.toContain('expanded');
-    component.find('button').simulate('click');
-    expect(component.html()).toContain('expanded');
+  it('expands when clicked', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Expandable virtual name='Hello'>
+        Goodbye
+      </Expandable>
+    );
+
+    expect(screen.getByText('Hello')).toBeVisible();
+    expect(screen.queryByText('Goodbye')).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole('button'));
+
+    expect(screen.getByText('Goodbye')).toBeVisible();
   });
 });

package/src/components/Field/Field.test.tsx

@@ -1,75 +1,66 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { Field } from './Field';
 import { Select } from '../Select';
 
 describe('Field', () => {
   it('renders correctly', () => {
-    const component = shallow(<Field placeholder='Placeholder' defaultValue='Hello' />);
+    render(<Field placeholder='Placeholder' defaultValue='Hello' />);
 
-    expect(component.html()).toEqual(
-      '<label class="Field"><span class="Field__context"><input class="TextInput" placeholder="Placeholder" aria-label="Placeholder" value="Hello"/></span></label>'
-    );
+    expect(screen.getByRole('textbox')).toBeVisible();
+    expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'Placeholder');
   });
 
   it('renders with a label', () => {
-    const component = shallow(
-      <Field placeholder='Placeholder' defaultValue='Hello' label='Label' />
-    );
+    render(<Field placeholder='Placeholder' defaultValue='Hello' label='Label' />);
 
-    expect(component.html()).toEqual(
-      '<label class="Field"><span class="Field__label">Label</span><span class="Field__context"><input class="TextInput" placeholder="Placeholder" aria-label="Label" value="Hello"/></span></label>'
-    );
+    expect(screen.getByRole('textbox')).toBeVisible();
+    expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'Placeholder');
+    expect(screen.getByText('Label')).toBeVisible();
   });
 
   it('renders with an error', () => {
-    const component = shallow(
-      <Field placeholder='Placeholder' defaultValue='Hello' label='Label' error='Error' />
-    );
+    render(<Field placeholder='Placeholder' defaultValue='Hello' label='Label' error='Error' />);
 
-    expect(component.html()).toEqual(
-      '<label class="Field"><span class="Field__label">Label</span><span class="Field__context"><input class="TextInput TextInput--error" placeholder="Placeholder" aria-label="Label" value="Hello"/><span class="Field__icon"></span></span><span class="Field__error">Error</span></label>'
-    );
+    expect(screen.getByRole('textbox')).toBeVisible();
+    expect(screen.getByRole('textbox')).toHaveClass('TextInput--error');
+    expect(screen.getByText('Error')).toBeVisible();
   });
 
-  it('renders with an error when children is <Select/>', () => {
+  it('renders with <Select/> child', () => {
     const options = [
       { value: 'foo', label: 'Foo' },
       { value: 'bar', label: 'Bar' },
       { value: 'baz', label: 'Baz', disabled: true }
     ];
 
-    const component = shallow(
+    render(
       <Field>
         <Select idRef='1' name='name-1' label='Sort by' options={options} />
       </Field>
     );
 
-    expect(component.html()).toEqual(
-      '<label class="Field"><span class="Field__context"><div id="Select--1" class="Select"><input id="1" name="name-1" type="hidden"/><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Select__value"><label id="Select__label--1">Sort by</label><span class="Select__icon"></span></button></div></span></label>'
-    );
+    expect(screen.getByRole('button', { name: /Sort by/ })).toBeVisible();
   });
 
   it('renders with a className', () => {
-    const component = shallow(
+    render(
       <Field className='Custom' placeholder='Placeholder' defaultValue='Hello' label='Label' />
     );
 
-    expect(component.html()).toEqual(
-      '<label class="Field Custom"><span class="Field__label">Label</span><span class="Field__context"><input class="TextInput" placeholder="Placeholder" aria-label="Label" value="Hello"/></span></label>'
-    );
+    expect(screen.getByRole('textbox')).toBeVisible();
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByRole('textbox').parentNode?.parentNode).toHaveClass('Custom');
   });
 
   it('supports custom children', () => {
-    const component = shallow(
+    render(
       <Field placeholder='Placeholder' defaultValue='Hello' label='Label'>
         <textarea />
       </Field>
     );
 
-    expect(component.html()).toEqual(
-      '<label class="Field"><span class="Field__label">Label</span><span class="Field__context"><textarea placeholder="Placeholder" label="Label">Hello</textarea></span></label>'
-    );
+    expect(screen.getByRole('textbox')).toBeVisible();
   });
 });

package/src/components/Label/Label.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { Label } from './Label';
 
 describe('Label', () => {
   it('renders correctly', () => {
-    const component = shallow(<Label>Hello</Label>);
-    expect(component.text()).toEqual('Hello');
+    render(<Label>Hello</Label>);
+    expect(screen.getByText('Hello')).toBeVisible();
   });
 });

package/src/components/Loading/Loading.test.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { Loading } from './Loading';
 
 describe('Loading', () => {
   it('renders correctly', () => {
-    const component = shallow(<Loading />);
-    expect(component.html()).toEqual(
-      '<div class="Loading"><svg class="Triangle" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.9986 0L0 24H24L11.9986 0Z" fill="#D56B27"></path></svg></div>'
-    );
+    render(<Loading aria-label='Loading' />);
+    expect(screen.getByLabelText('Loading')).toBeVisible();
   });
 });

package/src/components/Modal/Modal.test.tsx

@@ -1,28 +1,27 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { shallow } from 'enzyme';
 
 import { Modal } from './Modal';
 
 describe('Modal', () => {
   it('renders correctly', () => {
-    const component = shallow(<Modal onClose={() => {}}>Hello</Modal>);
-    expect(component.text()).toEqual('Hello');
+    render(<Modal onClose={() => {}}>Hello</Modal>);
+    expect(screen.getByText('Hello')).toBeVisible();
   });
 
   it('should only close when the modal wrapper is clicked', async () => {
     const onClose = jest.fn();
     const onClickButton = jest.fn();
-    const { getByTestId } = render(
+    render(
       <Modal data-testid='modal' onClose={onClose}>
         <button data-testid='button' onClick={onClickButton}>
           Click Me
         </button>
       </Modal>
     );
-    const modal = getByTestId('modal');
-    const button = getByTestId('button');
+    const modal = screen.getByTestId('modal');
+    const button = screen.getByTestId('button');
 
     await userEvent.click(button);
     expect(onClose).toBeCalledTimes(0);

package/src/components/ModalOverlay/ModalOverlay.test.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { render, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { ModalOverlay } from './ModalOverlay';
@@ -20,23 +20,23 @@ const ModalComponent: React.FC = () => {
 
 describe('ModalOverlay', () => {
   it('renders correctly', () => {
-    const { queryByText } = render(<ModalOverlay onClose={() => {}}>Hello</ModalOverlay>);
+    render(<ModalOverlay onClose={() => {}}>Hello</ModalOverlay>);
 
-    expect(queryByText('Hello')).not.toBeNull();
+    expect(screen.getByText('Hello')).toBeInTheDocument();
   });
 
   it('should open and close the modal', async () => {
-    const { getByTestId, queryByText } = render(<ModalComponent />);
+    render(<ModalComponent />);
 
     // Should not show by default
-    expect(queryByText('Modal Content')).toBeNull();
+    expect(screen.queryByText('Modal Content')).not.toBeInTheDocument();
 
     // Should show after clicking button
-    userEvent.click(getByTestId('button'));
-    await waitFor(() => expect(queryByText('Modal Content')).not.toBeNull());
+    userEvent.click(screen.getByTestId('button'));
+    await screen.findByText('Modal Content');
 
     // Should hide after clicking wrapper
-    userEvent.click(getByTestId('modal'));
-    await waitFor(() => expect(queryByText('Modal Content')).toBeNull());
+    userEvent.click(screen.getByTestId('modal'));
+    await waitFor(() => expect(screen.queryByText('Modal Content')).not.toBeInTheDocument());
   });
 });

package/src/components/Overlay/Overlay.test.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { Overlay } from './Overlay';
 
 describe('Overlay', () => {
   it('renders correctly', () => {
     const text = 'test-Text';
-    const component = shallow(<Overlay>{text}</Overlay>);
-    expect(component.text()).toEqual(text);
+    render(<Overlay>{text}</Overlay>);
+    expect(screen.getByText(text)).toBeVisible();
   });
 });

package/src/components/Popover/Popover.test.tsx

@@ -1,18 +1,21 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { Popover } from './Popover';
 
 describe('Popover', () => {
-  it('renders correctly', () => {
-    const component = mount(
+  it('renders correctly', async () => {
+    render(
       <Popover content={<div>Secret</div>}>
         <span>Hover</span>
       </Popover>
     );
 
-    expect(component.html()).not.toContain('Secret');
-    component.simulate('mouseenter');
-    expect(component.html()).toContain('Secret');
+    expect(screen.queryByText('Secret')).not.toBeInTheDocument();
+
+    await userEvent.hover(screen.getByText('Hover'));
+
+    expect(screen.getByText('Secret')).toBeVisible();
   });
 });

package/src/components/PromoBanner/PromoBanner.test.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { PromoBanner } from './PromoBanner';
 
 describe('PromoBanner', () => {
   it('renders correctly', () => {
-    const component = mount(
+    render(
       <PromoBanner>
         <span>Hello</span>
       </PromoBanner>
     );
-    expect(component.text()).toEqual('Hello');
+    expect(screen.getByText('Hello')).toBeVisible();
   });
 });

package/src/components/RadioButton/RadioButton.test.tsx

@@ -1,20 +1,16 @@
 import React from 'react';
-import { mount } from 'enzyme';
-
+import { render, screen } from '@testing-library/react';
 import { RadioButton } from './RadioButton';
 
 describe('RadioButton', () => {
   it('renders correctly', () => {
-    const component = mount(<RadioButton />);
-    expect(component.html()).toEqual(
-      '<label tabindex="0" class="RadioButton"><span tabindex="-1" class="RadioButton__indicator RadioButton__indicator--unchecked"></span><input tabindex="-1" class="RadioButton__input" type="radio" role="radio" value=""></label>'
-    );
+    render(<RadioButton />);
+    expect(screen.getByRole('radio')).toBeVisible();
   });
 
   it('supports checked', () => {
-    const component = mount(<RadioButton checked readOnly />);
-    const html = component.html();
-    expect(html).toContain('class="RadioButton RadioButton--checked"');
-    expect(html).toContain('readonly="" value="" checked=""');
+    render(<RadioButton checked readOnly />);
+    expect(screen.getByRole('radio')).toBeVisible();
+    expect(screen.getByRole('radio')).toBeChecked();
   });
 });

package/src/components/SearchInput/SearchInput.test.tsx

@@ -1,13 +1,17 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { SearchInput } from './SearchInput';
 
 describe('SearchInput', () => {
-  it('clears the input when the button is clicked', () => {
-    const component = mount(<SearchInput value='Hello' />);
-    expect(component.find('input').getElement().props.value).toEqual('Hello');
-    component.find('button').simulate('click');
-    expect(component.find('input').getElement().props.value).not.toEqual('Hello');
+  it('clears the input when the button is clicked', async () => {
+    render(<SearchInput value='Hello' />);
+
+    expect(screen.getByRole('textbox')).toHaveValue('Hello');
+
+    await userEvent.click(screen.getByRole('button'));
+
+    expect(screen.getByRole('textbox')).toHaveValue('');
   });
 });

package/src/components/Select/Select.stories.tsx

@@ -34,7 +34,8 @@ export const Default = () => (
       { disabled: true, idRef: '4', label: 'Sort' },
       { idRef: '5', label: '' },
       { idRef: '5', label: '', error: 'Error' },
-      { idRef: '6', label: '', dropDirection: 'up' }
+      { idRef: '6', label: '', dropDirection: 'up' },
+      { idRef: '7', label: undefined, placeholder: 'Placeholder' }
     ]}
   >
     <Select label='Sort by' options={OPTIONS} onChange={action('onChange')} />

package/src/components/Select/Select.test.tsx

@@ -24,7 +24,7 @@ describe('Select', () => {
     const { container } = render(
       <Select idRef='1' name='name-1' label='Sort by' options={options} />
     );
-    const button = container.querySelector('#Select__value--1')!;
+    const button = screen.getByRole('button', { name: /Sort by/ });
     await userEvent.click(button);
     expect(container.innerHTML).toEqual(
       '<div id="Select--1" class="Select"><input id="1" name="name-1" type="hidden" value=""><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Select__value"><label id="Select__label--1">Sort by</label><span class="Select__icon"></span></button><div class="SelectOptions Select__options Select__options--down"><ul class="SelectOptions__list" tabindex="-1" role="listbox" aria-labelledby="Select__label--1" aria-activedescendant="SelectOption--foo-1"><li class="SelectOption SelectOption--active" aria-label="Foo" aria-selected="false" role="option">Foo</li><li class="SelectOption" aria-label="Bar" aria-selected="false" role="option">Bar</li><li class="SelectOption SelectOption--disabled" aria-label="Baz" aria-selected="false" role="option">Baz</li></ul></div></div>'
@@ -42,7 +42,7 @@ describe('Select', () => {
         options={options}
       />
     );
-    const button = container.querySelector('#Select__value--1')!;
+    const button = screen.getByRole('button', { name: /Sort by/ });
     await userEvent.click(button);
     expect(container.innerHTML).toEqual(
       '<div id="Select--1" class="Select Select--disabled"><input id="1" name="name-1" type="hidden" value=""><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Clickable--disabled Select__value" disabled=""><label id="Select__label--1">Sort by</label><span class="Select__icon"></span></button></div>'
@@ -51,7 +51,7 @@ describe('Select', () => {
 
   it('calls onChange when selecting an option', async () => {
     const onChange = jest.fn();
-    const { container } = render(
+    render(
       <Select
         defaultValue={undefined}
         idRef='1'
@@ -61,7 +61,7 @@ describe('Select', () => {
         onChange={onChange}
       />
     );
-    const button = container.querySelector('#Select__value--1')!;
+    const button = screen.getByRole('button', { name: /Sort by/ });
     await userEvent.click(button);
     const option = screen.getByLabelText('Bar');
     await userEvent.click(option);
@@ -70,7 +70,7 @@ describe('Select', () => {
 
   it('does not call onChange when selecting a disabled option', async () => {
     const onChange = jest.fn();
-    const { container } = render(
+    render(
       <Select
         defaultValue={undefined}
         idRef='1'
@@ -80,7 +80,7 @@ describe('Select', () => {
         onChange={onChange}
       />
     );
-    const button = container.querySelector('#Select__value--1')!;
+    const button = screen.getByRole('button', { name: /Sort by/ });
     await userEvent.click(button);
     const option = screen.getByLabelText('Baz');
     await userEvent.click(option);
@@ -91,7 +91,7 @@ describe('Select', () => {
     const { container } = render(
       <Select idRef='1' name='name-1' label='Sort by' options={options} />
     );
-    const button = container.querySelector('#Select__value--1')!;
+    const button = screen.getByRole('button', { name: /Sort by/ });
     await userEvent.click(button);
     const option = screen.getByLabelText('Bar');
     await userEvent.click(option);
@@ -102,7 +102,7 @@ describe('Select', () => {
 
   it('renders correctly when there is no label', async () => {
     const { container } = render(<Select idRef='1' name='name-1' options={options} />);
-    const button = container.querySelector('#Select__value--1')!;
+    const button = screen.getByRole('button', { name: 'Select' });
     await userEvent.click(button);
     const option = screen.getByLabelText('Bar');
     await userEvent.click(option);

package/src/components/Select/Select.tsx

@@ -44,6 +44,7 @@ export const Select: React.FC<SelectProps> = ({
   name,
   onChange,
   options,
+  placeholder,
   searchable,
   shiftIconLeftwards = false,
   value,
@@ -116,7 +117,11 @@ export const Select: React.FC<SelectProps> = ({
           type='button'
           title='Select'
         >
-          <SelectLabel idRef={idRef} label={label} hasValue={focused != null || selected != null} />
+          <SelectLabel
+            idRef={idRef}
+            label={label || (selected === undefined ? placeholder : undefined)}
+            hasValue={focused != null || selected != null}
+          />
 
           {(focused ?? selected)?.label}
 

package/src/components/SelectableButton/SelectableButton.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { SelectableButton } from './SelectableButton';
 
 describe('SelectableButton', () => {
   it('renders correctly', () => {
-    const component = mount(<SelectableButton>Click me</SelectableButton>);
-    expect(component.text()).toEqual('Click me');
+    render(<SelectableButton>Click me</SelectableButton>);
+    expect(screen.getByText('Click me')).toBeVisible();
   });
 });