@moda/om 16.1.0 → 16.2.1

package/src/components/Popover/Popover.tsx

@@ -13,6 +13,9 @@ export type PopoverProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 
 export const POPOVER_MOUSEOUT_DELAY_MS = 200;
+const THREE_QUARTER_SECOND_DELAY = 750;
+const ONE_SECOND_DELAY = 1000;
+const FIVE_SECOND_DELAY = 5000;
 
 enum Mode {
   Opening = 'opening',
@@ -80,7 +83,7 @@ export const Popover: React.FC<PopoverProps> = ({
   useEffect(() => {
     if (mode !== Mode.Closing) return;
 
-    const closingTimeout = setTimeout(() => setMode(Mode.Closed), 750);
+    const closingTimeout = setTimeout(() => setMode(Mode.Closed), THREE_QUARTER_SECOND_DELAY);
 
     return () => clearTimeout(closingTimeout);
   }, [mode]);
@@ -88,7 +91,7 @@ export const Popover: React.FC<PopoverProps> = ({
   useEffect(() => {
     if (mode !== Mode.AutoOpening) return;
 
-    const openingTimeout = setTimeout(() => setMode(Mode.AutoOpen), 1000);
+    const openingTimeout = setTimeout(() => setMode(Mode.AutoOpen), ONE_SECOND_DELAY);
 
     return () => clearTimeout(openingTimeout);
   }, [mode]);
@@ -96,7 +99,7 @@ export const Popover: React.FC<PopoverProps> = ({
   useEffect(() => {
     if (mode !== Mode.Opening) return;
 
-    const openingTimeout = setTimeout(() => setMode(Mode.Open), 750);
+    const openingTimeout = setTimeout(() => setMode(Mode.Open), THREE_QUARTER_SECOND_DELAY);
 
     return () => clearTimeout(openingTimeout);
   }, [mode]);
@@ -104,7 +107,7 @@ export const Popover: React.FC<PopoverProps> = ({
   useEffect(() => {
     if (mode !== Mode.AutoOpen) return;
 
-    const stayingTimeout = setTimeout(handleClose, 5000);
+    const stayingTimeout = setTimeout(handleClose, FIVE_SECOND_DELAY);
 
     return () => clearTimeout(stayingTimeout);
   }, [handleClose, mode, smoothTransitioning]);
@@ -125,7 +128,7 @@ export const Popover: React.FC<PopoverProps> = ({
       onMouseLeave={handleMouseLeave}
       {...rest}
     >
-      <span className='Popover__trigger'>
+      <span className="Popover__trigger">
         {isOpen && (
           <div
             className={classNames('Popover__box', {
@@ -134,11 +137,11 @@ export const Popover: React.FC<PopoverProps> = ({
             })}
           >
             <div
-              className='Popover__caret'
+              className="Popover__caret"
               style={{ zIndex: zIndex != null ? zIndex + 1 : undefined }}
             />
 
-            <div className='Popover__content' style={{ zIndex }}>
+            <div className="Popover__content" style={{ zIndex }}>
               {content}
             </div>
           </div>

package/src/components/PromoBanner/PromoBanner.stories.tsx

@@ -9,22 +9,22 @@ export const Default = () => (
     states={[
       { children: <span>Center</span> },
       {
-        children: [<span key='left'>Left</span>, <span key='right'>Right</span>]
+        children: [<span key="left">Left</span>, <span key="right">Right</span>]
       },
       {
         children: [
-          <span key='left'>Left</span>,
-          <span key='center'>Center</span>,
-          <span key='right'>Right</span>
+          <span key="left">Left</span>,
+          <span key="center">Center</span>,
+          <span key="right">Right</span>
         ]
       },
       {
         children: [
-          <span key='left'>Currency: USA (USD $)</span>,
-          <span key='center' className='FOO'>
-            Order by Dec. 12 for delivery by Dec. 25 — <a href='#'>LEARN MORE</a>
+          <span key="left">Currency: USA (USD $)</span>,
+          <span key="center" className="FOO">
+            Order by Dec. 12 for delivery by Dec. 25 — <a href="#">LEARN MORE</a>
           </span>,
-          <span key='right'>Hi, Friend</span>
+          <span key="right">Hi, Friend</span>
         ]
       }
     ]}
@@ -38,7 +38,7 @@ export const Mobile = () => (
     <PromoBanner>
       <span>Currency: USA (USD $)</span>
       <span>
-        Order by Dec. 12 for delivery by Dec. 25 — <a href='#'>LEARN MORE</a>
+        Order by Dec. 12 for delivery by Dec. 25 — <a href="#">LEARN MORE</a>
       </span>
       <span>Hi, Friend</span>
     </PromoBanner>

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/PromoBanner/PromoBanner.tsx

@@ -11,7 +11,7 @@ export const PromoBanner: React.FC<PromoBannerProps> = ({ className, children, .
   const length = Children.count(children);
   return (
     <div className={classNames('PromoBanner', className)} {...rest}>
-      <Constrain className='PromoBanner__constrain'>
+      <Constrain className="PromoBanner__constrain">
         {Children.map(children, (child: JSX.Element, index) => {
           const isCenter = length % 2 !== 0 && Math.floor(length / 2) === index;
           return cloneElement(child, {

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import { States } from 'storybook-states';
 import { Text } from '../Text';
-import { RadioButton, RadioButtonProps } from './RadioButton';
 import { Stack } from '../Stack';
+import { RadioButton, RadioButtonProps } from './RadioButton';
 
 export default { title: 'Components/RadioButton' };
 
@@ -29,7 +29,7 @@ export const Select = () => {
   return (
     <States>
       <Stack space={3}>
-        <Text color='burnt-orange'>{selected}</Text>
+        <Text color="burnt-orange">{selected}</Text>
 
         {EXAMPLES.map(value => (
           <RadioButton

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/RadioButton/RadioButton.tsx

@@ -36,16 +36,16 @@ export const RadioButton: React.FC<RadioButtonProps> = ({
       <input
         ref={inputRef}
         tabIndex={-1}
-        className='RadioButton__input'
-        type='radio'
-        role='radio'
+        className="RadioButton__input"
+        type="radio"
+        role="radio"
         checked={checked}
         value={value}
         disabled={disabled}
         {...rest}
       />
       {children && (
-        <span className='RadioButton__label' tabIndex={-1}>
+        <span className="RadioButton__label" tabIndex={-1}>
           {children}
         </span>
       )}

package/src/components/SearchInput/SearchInput.stories.tsx

@@ -9,7 +9,7 @@ export default { title: 'Components/SearchInput' };
 export const Default = () => (
   <States<SearchInputProps> states={[{}, { value: 'prada' }, { autoFocus: true }]}>
     <SearchInput
-      placeholder='Search'
+      placeholder="Search"
       onChange={action('onChange')}
       onChangeValue={action('onChangeValue')}
     />
@@ -34,7 +34,7 @@ export const DropdownExample = () => {
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <SearchInput placeholder='Search' onChangeValue={setQuery} value={query} autoFocus />
+      <SearchInput placeholder="Search" onChangeValue={setQuery} value={query} autoFocus />
 
       {query && (
         <Text style={{ border: '1px solid gray', marginTop: '-1px', padding: '1rem' }}>

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/SearchInput/SearchInput.tsx

@@ -50,12 +50,12 @@ export const SearchInput: React.FC<SearchInputProps> = ({
 
   return (
     <div className={classNames('SearchInput', className)}>
-      <div className='SearchInput__icon'>
+      <div className="SearchInput__icon">
         <SearchIcon />
       </div>
 
       <TextInput
-        className='SearchInput__input'
+        className="SearchInput__input"
         onChange={handleChange}
         value={controlledValue}
         ref={ref}
@@ -63,7 +63,7 @@ export const SearchInput: React.FC<SearchInputProps> = ({
       />
 
       {controlledValue && (
-        <Clickable className='SearchInput__clear' onClick={handleClick} type='reset'>
+        <Clickable className="SearchInput__clear" onClick={handleClick} type="reset">
           <ExitIcon />
         </Clickable>
       )}

package/src/components/Select/MultiSelect.tsx

@@ -4,11 +4,11 @@ import { uniq } from 'ramda';
 import ChevronDownIcon from '@moda/icons/chevron-down-12';
 import ChevronUpIcon from '@moda/icons/chevron-up-12';
 import ExitIcon from '@moda/icons/exit-16';
-import { SelectableOption } from '.';
+import { Clickable } from '../Clickable';
 import { SelectOptions } from './SelectOptions';
 import { useSelect } from './useSelect';
+import { SelectableOption } from '.';
 import './MultiSelect.scss';
-import { Clickable } from '../Clickable';
 
 type Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'value' | 'onChange'> & {
   defaultValue?: string[] | undefined;
@@ -85,16 +85,16 @@ export const MultiSelect: React.FC<Props> = ({
       ref={selectRef}
       {...rest}
     >
-      <Clickable className='MultiSelect__search' disabled={disabled} onClick={handleToggle}>
-        <div className='MultiSelect__selected-items'>
+      <Clickable className="MultiSelect__search" disabled={disabled} onClick={handleToggle}>
+        <div className="MultiSelect__selected-items">
           {values.map((value, index) => (
-            <span className='MultiSelect__selected-item' key={index}>
-              <span className='MultiSelect__selected-value'>
+            <span className="MultiSelect__selected-item" key={index}>
+              <span className="MultiSelect__selected-value">
                 {options.find(option => option.value === value)?.label || value}
               </span>
               <ExitIcon
                 style={{ width: '8px', height: '8px', position: 'relative' }}
-                className='MultiSelect__exit'
+                className="MultiSelect__exit"
                 onClick={() => handleRemove(value)}
               />
             </span>

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

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import { States } from 'storybook-states';
+import { useCallback } from 'react';
+import { Input } from '../Field';
 import { Select, SelectProps } from './Select';
 import { MultiSelect } from './MultiSelect';
-import { Input } from '../Field';
-import { useCallback } from 'react';
 
 export default { title: 'Components/Select' };
 
@@ -34,10 +34,11 @@ 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')} />
+    <Select label="Sort by" options={OPTIONS} onChange={action('onChange')} />
   </States>
 );
 
@@ -46,15 +47,16 @@ export const ChangingValue = () => {
 
   const values = OPTIONS.map(({ value }) => value);
   const value = values[cursor % values.length];
+  const HALF_SECOND_INTERVAL = 500;
 
   useEffect(() => {
     const interval = setInterval(() => {
       setCursor(prevCursor => prevCursor + 1);
-    }, 500);
+    }, HALF_SECOND_INTERVAL);
     return () => clearInterval(interval);
   }, []);
 
-  return <Select label='Sort by' options={OPTIONS} onChange={action('onChange')} value={value} />;
+  return <Select label="Sort by" options={OPTIONS} onChange={action('onChange')} value={value} />;
 };
 
 const COUNTRIES = [
@@ -258,16 +260,16 @@ const COUNTRIES = [
 
 export const Long = () => (
   <Select
-    label='Choose country'
+    label="Choose country"
     options={COUNTRIES.map(country => ({ label: country, value: country }))}
   />
 );
 
 export const AutoFill = () => (
   <>
-    <Input label='Address*' name='addressLine1' />
-    <Input label='City' name='city' />
-    <Input label='Choose country' name='country'>
+    <Input label="Address*" name="addressLine1" />
+    <Input label="City" name="city" />
+    <Input label="Choose country" name="country">
       <Select
         options={COUNTRIES.map(country => ({ label: country, value: country }))}
         allowAutoFill
@@ -278,7 +280,7 @@ export const AutoFill = () => (
 
 export const InsideInputComponent = () => (
   <Input error>
-    <Select options={OPTIONS}></Select>
+    <Select options={OPTIONS} />
   </Input>
 );
 
@@ -311,7 +313,7 @@ export const MultiSelectWithDefaultsComponent = () => {
     <MultiSelect
       onChange={handleSetItems}
       value={selectedItems}
-      placeholder='United States'
+      placeholder="United States"
       defaultValue={['Canada', 'Albania', 'Greece']}
       options={COUNTRIES.map(country => ({ label: country, value: country }))}
     />
@@ -321,7 +323,7 @@ export const MultiSelectWithDefaultsComponent = () => {
 export const MultiSelectUncontrolledComponent = () => {
   return (
     <MultiSelect
-      placeholder='United States'
+      placeholder="United States"
       defaultValue={['Canada', 'Albania', 'Greece']}
       options={COUNTRIES.map(country => ({ label: country, value: country }))}
     />
@@ -331,8 +333,8 @@ export const MultiSelectUncontrolledComponent = () => {
 export const MultiSelectUncontrolledSearchComponent = () => {
   return (
     <MultiSelect
-      searchable={true}
-      placeholder='United States'
+      searchable
+      placeholder="United States"
       defaultValue={['Canada', 'Albania', 'Greece']}
       options={COUNTRIES.map(country => ({ label: country, value: country }))}
     />

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

@@ -13,7 +13,7 @@ describe('Select', () => {
 
   it('renders correctly', () => {
     const { container } = render(
-      <Select idRef='1' name='name-1' label='Sort by' options={options} />
+      <Select idRef="1" name="name-1" label="Sort by" options={options} />
     );
     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="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>'
@@ -22,9 +22,9 @@ describe('Select', () => {
 
   it('expands when clicked', async () => {
     const { container } = render(
-      <Select idRef='1' name='name-1' label='Sort by' options={options} />
+      <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>'
@@ -36,13 +36,13 @@ describe('Select', () => {
       <Select
         defaultValue={undefined}
         disabled
-        idRef='1'
-        name='name-1'
-        label='Sort by'
+        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 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,17 +51,17 @@ describe('Select', () => {
 
   it('calls onChange when selecting an option', async () => {
     const onChange = jest.fn();
-    const { container } = render(
+    render(
       <Select
         defaultValue={undefined}
-        idRef='1'
-        label='Sort by'
-        name='name-1'
+        idRef="1"
+        label="Sort by"
+        name="name-1"
         options={options}
         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,17 +70,17 @@ 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'
-        label='Sort by'
-        name='name-1'
+        idRef="1"
+        label="Sort by"
+        name="name-1"
         options={options}
         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);
@@ -89,9 +89,9 @@ describe('Select', () => {
 
   it('renders correctly with ":" between label and value if value is not undefined', async () => {
     const { container } = render(
-      <Select idRef='1' name='name-1' label='Sort by' options={options} />
+      <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);
@@ -101,8 +101,8 @@ 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 { container } = render(<Select idRef="1" name="name-1" options={options} />);
+    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,
@@ -102,21 +103,25 @@ export const Select: React.FC<SelectProps> = ({
         {...rest}
       >
         {!allowAutoFill && name && (
-          <input id={idRef} name={name} type='hidden' value={state.value} />
+          <input id={idRef} name={name} type="hidden" value={state.value} />
         )}
 
         <Clickable
           id={`Select__value--${idRef}`}
-          className='Select__value'
+          className="Select__value"
           disabled={disabled}
           onClick={handleToggle}
-          aria-haspopup='listbox'
+          aria-haspopup="listbox"
           aria-expanded={state.mode === Mode.Open}
           aria-labelledby={`Select__label--${idRef} Select__value--${idRef}`}
-          type='button'
-          title='Select'
+          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}
 
@@ -145,11 +150,11 @@ export const Select: React.FC<SelectProps> = ({
 
       {allowAutoFill && (
         <input
-          className='Select__hidden-field'
+          className="Select__hidden-field"
           name={name}
           onChange={({ target }) => handleAutofill(target.value)}
           value={value}
-          aria-hidden='true'
+          aria-hidden="true"
           tabIndex={-1}
         />
       )}

package/src/components/Select/SelectOption.tsx

@@ -45,7 +45,7 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
       onClick={handleClick}
       aria-label={option.label}
       aria-selected={selected}
-      role='option'
+      role="option"
     >
       {option.label}
     </li>

package/src/components/Select/SelectOptions.tsx

@@ -61,17 +61,17 @@ export const SelectOptions: React.FC<SelectOptionsProps> = ({
     <div className={classNames('SelectOptions', className)}>
       {searchable && (
         <SearchInput
-          className='SelectOptions__search'
-          placeholder='Search'
+          className="SelectOptions__search"
+          placeholder="Search"
           value={searchPhrase}
           onChange={setSearchPhrase}
           onClear={() => setSearchPhrase('')}
         />
       )}
       <ul
-        className='SelectOptions__list'
+        className="SelectOptions__list"
         tabIndex={-1}
-        role='listbox'
+        role="listbox"
         ref={ref}
         aria-labelledby={`Select__label--${idRef}`}
         aria-activedescendant={`SelectOption--${activeOption?.value}-${idRef}`}
@@ -91,7 +91,7 @@ export const SelectOptions: React.FC<SelectOptionsProps> = ({
         ))}
       </ul>
       {options.length === 0 && (
-        <Text className='SelectOptions__none' color='cement'>
+        <Text className="SelectOptions__none" color="cement">
           Nothing found
         </Text>
       )}

package/src/components/SelectableButton/SelectableButton.stories.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { action } from '@storybook/addon-actions';
 
 import { States } from 'storybook-states';
-import { SelectableButton, SelectableButtonProps } from './SelectableButton';
 import { Stack } from '../Stack';
+import { SelectableButton, SelectableButtonProps } from './SelectableButton';
 
 export default { title: 'Components/SelectableButton' };
 

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();
   });
 });