@moda/om 16.1.1 → 16.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moda/om",
-  "version": "16.1.1",
+  "version": "16.2.0",
   "description": "Moda Operandi design system",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -71,21 +71,21 @@
     "@rollup/plugin-babel": "^5.2.3",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.0.6",
-    "@storybook/addon-actions": "^6.5.0-beta.1",
-    "@storybook/addon-essentials": "^6.5.0-beta.1",
-    "@storybook/addon-links": "^6.5.0-beta.1",
+    "@storybook/addon-actions": "^6.5.6",
+    "@storybook/addon-essentials": "^6.5.6",
+    "@storybook/addon-links": "^6.5.6",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-viewport": "^6.5.0-beta.1",
-    "@storybook/addons": "^6.5.0-beta.1",
-    "@storybook/builder-webpack5": "^6.5.0-beta.1",
-    "@storybook/manager-webpack5": "^6.5.0-beta.1",
-    "@storybook/react": "^6.5.0-beta.1",
+    "@storybook/addon-viewport": "^6.5.6",
+    "@storybook/addons": "^6.5.6",
+    "@storybook/builder-webpack5": "^6.5.6",
+    "@storybook/manager-webpack5": "^6.5.6",
+    "@storybook/react": "^6.5.6",
+    "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^14.1.1",
     "@types/cheerio": "^0.22.22",
     "@types/credit-card-type": "^9.0.0",
-    "@types/enzyme": "^3.10.3",
-    "@types/jest": "^27.5.1",
+    "@types/jest": "^28.1.0",
     "@types/ramda": "^0.28.0",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.1",
@@ -93,22 +93,23 @@
     "@types/react-router-dom": "^5.1.4",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
     "@typescript-eslint/parser": "^5.23.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
     "autoprefixer": "^10.0.4",
     "babel-loader": "^8.1.0",
     "commitizen": "^4.0.3",
     "css-loader": "^6.0.0",
     "cz-conventional-changelog": "^3.3.0",
-    "enzyme": "^3.10.0",
     "eslint": "^8.15.0",
+    "eslint-plugin-jest-dom": "^4.0.2",
     "eslint-plugin-react": "^7.18.3",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-testing-library": "^5.5.1",
     "husky": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",
     "ignore-not-found-export-webpack-plugin": "^1.0.1",
     "jest": "^28.1.0",
     "jest-environment-jsdom": "^28.1.0",
-    "lint-staged": "^12.0.2",
+    "jest-matchmedia-mock": "^1.1.0",
+    "lint-staged": "^13.0.0",
     "node-sass": "^7.0.0",
     "node-sass-package-importer": "^5.3.2",
     "pinst": "^3.0.0",

package/src/components/AspectRatioBox/AspectRatioBox.test.tsx

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

package/src/components/Badge/Badge.test.tsx

@@ -1,23 +1,16 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { Badge } from './Badge';
 
 describe('Badge', () => {
   it('supports custom children', () => {
-    const component = shallow(<Badge>Custom Text - 1</Badge>);
-    expect(component.html()).toEqual('<span class="Badge">Custom Text - 1</span>');
+    render(<Badge>Custom Text - 1</Badge>);
+    expect(screen.getByText('Custom Text - 1')).toBeVisible();
   });
 
   it('supports custom themes and children', () => {
-    const component = shallow(<Badge theme='klein-blue'>Custom Text - 2</Badge>);
-    expect(component.html()).toEqual(
-      '<span class="Badge Badge--klein-blue">Custom Text - 2</span>'
-    );
-  });
-
-  it('allows for arbitrary children', () => {
-    const component = shallow(<Badge>Hello</Badge>);
-    expect(component.text()).toEqual('Hello');
+    render(<Badge theme='klein-blue'>Custom Text - 2</Badge>);
+    expect(screen.getByText('Custom Text - 2')).toHaveClass('Badge--klein-blue');
   });
 });

package/src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { Breadcrumbs, Breadcrumb } from './index';
 
 describe('Breadcrumbs', () => {
   it('wraps elements with microdata tags', () => {
-    const component = shallow(
+    render(
       <Breadcrumbs>
         <Breadcrumb href='/one'>One</Breadcrumb>
         <Breadcrumb href='/two'>Two</Breadcrumb>
         <Breadcrumb>Three</Breadcrumb>
       </Breadcrumbs>
     );
-    expect(component.html()).toEqual(
-      '<ol itemscope="" itemType="http://schema.org/BreadcrumbList" class="Breadcrumbs"><li class="Breadcrumb" itemProp="itemListElement" itemscope="" itemType="http://schema.org/ListItem"><a itemProp="item" href="/one" class="Clickable ControlLink ControlLink--underlined"><span itemProp="name">One</span></a><meta itemProp="position" content="1"/></li><li class="Breadcrumb" itemProp="itemListElement" itemscope="" itemType="http://schema.org/ListItem"><a itemProp="item" href="/two" class="Clickable ControlLink ControlLink--underlined"><span itemProp="name">Two</span></a><meta itemProp="position" content="2"/></li><li class="Breadcrumb" itemProp="itemListElement" itemscope="" itemType="http://schema.org/ListItem"><span itemProp="name">Three</span><meta itemProp="position" content="3"/></li></ol>'
-    );
+    expect(screen.getAllByRole('listitem').at(0)).toHaveAttribute('itemprop');
+    expect(screen.getAllByRole('listitem').at(0)).toHaveAttribute('itemscope');
+    expect(screen.getAllByRole('listitem').at(0)).toHaveAttribute('itemtype');
   });
 });

package/src/components/Breakpoint/Breakpoint.test.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { Breakpoint } from './Breakpoint';
 
 describe('Breakpoint', () => {
-  // TODO: Investigate how to test media queries in this environment
-  xit('renders correctly', () => {
-    const breakpoint = shallow(
+  it('renders correctly', () => {
+    render(
       <>
-        <Breakpoint gt='sm'>Visible on mobile</Breakpoint>
-        <Breakpoint lt='sm'>Visible on desktop</Breakpoint>
+        <Breakpoint gt='md'>Visible on mobile</Breakpoint>
+        <Breakpoint lt='md'>Visible on desktop</Breakpoint>
       </>
     );
-    expect(breakpoint.text()).toContain('Visible on mobile');
-    expect(breakpoint.text()).not.toContain('Visible on desktop');
+    expect(screen.getByText('Visible on desktop')).toBeVisible();
+    expect(screen.queryByText('Visible on mobile')).not.toBeInTheDocument();
   });
 });

package/src/components/Button/Button.test.tsx

@@ -1,11 +1,22 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { Button } from './Button';
 
 describe('Button', () => {
   it('renders correctly', () => {
-    const button = shallow(<Button>Click me</Button>);
-    expect(button.text()).toEqual('Click me');
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole('button', { name: 'Click me' })).toBeVisible();
+  });
+
+  it('calls onClick when clicked', async () => {
+    const user = userEvent.setup();
+    const onClick = jest.fn();
+
+    render(<Button onClick={onClick}>Click me</Button>);
+
+    await user.click(screen.getByRole('button', { name: 'Click me' }));
+    expect(onClick).toBeCalled();
   });
 });

package/src/components/Checkbox/Checkbox.test.tsx

@@ -1,5 +1,5 @@
 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 { Checkbox } from './Checkbox';
@@ -7,33 +7,31 @@ import { Checkbox } from './Checkbox';
 describe('Checkbox', () => {
   it('works correctly with checked attribute (controlled)', async () => {
     const handleChange = jest.fn();
-    const { getByRole, getByTestId, rerender } = render(
+    const { rerender } = render(
       <Checkbox data-testid='checkbox' checked onChange={handleChange} />
     );
 
-    expect((getByRole('checkbox') as HTMLInputElement).checked).toBe(true);
+    expect(screen.getByRole('checkbox') as HTMLInputElement).toBeChecked();
 
-    await userEvent.click(getByTestId('checkbox'));
+    await userEvent.click(screen.getByTestId('checkbox'));
 
     expect(handleChange).toBeCalled();
-    expect((getByRole('checkbox') as HTMLInputElement).checked).toBe(true);
+    expect(screen.getByRole('checkbox') as HTMLInputElement).toBeChecked();
 
     rerender(<Checkbox data-testid='checkbox' checked={false} onChange={handleChange} />);
 
-    expect((getByRole('checkbox') as HTMLInputElement).checked).toBe(false);
+    expect(screen.getByRole('checkbox') as HTMLInputElement).not.toBeChecked();
   });
 
   it('works correctly with defaultChecked attribute (uncontrolled)', async () => {
     const handleChange = jest.fn();
-    const { getByRole, getByTestId } = render(
-      <Checkbox data-testid='checkbox' defaultChecked={false} onChange={handleChange} />
-    );
+    render(<Checkbox data-testid='checkbox' defaultChecked={false} onChange={handleChange} />);
 
-    expect((getByRole('checkbox') as HTMLInputElement).checked).toBe(false);
+    expect(screen.getByRole('checkbox') as HTMLInputElement).not.toBeChecked();
 
-    await userEvent.click(getByTestId('checkbox'));
+    await userEvent.click(screen.getByTestId('checkbox'));
 
     expect(handleChange).toBeCalled();
-    expect((getByRole('checkbox') as HTMLInputElement).checked).toBe(true);
+    expect(screen.getByRole('checkbox') as HTMLInputElement).toBeChecked();
   });
 });

package/src/components/Clickable/Clickable.test.tsx

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

package/src/components/ColorSwatch/ColorSwatch.test.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { ColorSwatch } from './ColorSwatch';
 
 describe('ColorSwatch', () => {
   it('renders correctly', () => {
-    const component = shallow(<ColorSwatch color='nude' />);
-    expect(component.html()).toEqual(
-      '<button class="Clickable ColorSwatch"><div class="ColorSwatch__chip" style="background-color:#eee4d7"></div></button>'
-    );
+    render(<ColorSwatch color='nude' />);
+    expect(screen.getByRole('button')).toBeVisible();
   });
 });

package/src/components/Constrain/Constrain.test.tsx

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

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