Components: move to RTL

lib/components/package.json

@@ -53,9 +53,7 @@
   },
   "devDependencies": {
     "css": "^3.0.0",
-    "enzyme": "^3.9.0",
-    "jest": "^26.0.0",
-    "jest-enzyme": "^7.0.2"
+    "jest": "^26.0.0"
   },
   "publishConfig": {
     "access": "public"

lib/components/src/typography/link/link.test.tsx

@@ -1,108 +1,70 @@
-import { shallow } from 'enzyme';
-import React from 'react';
-import { Link } from './link';
+import React, { AnchorHTMLAttributes } from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ThemeProvider, themes, convert } from '@storybook/theming';
+import { Link, LinkProps } from './link';
 
 const LEFT_BUTTON = 0;
 const MIDDLE_BUTTON = 1;
 const RIGHT_BUTTON = 2;
 
-const createEvent = (options: any) => ({
-  button: LEFT_BUTTON,
-  preventDefault: jest.fn(),
-  ...options,
-});
-const renderLink = (props: any) => shallow(<Link {...{ children: 'Content', ...props }} />);
-
-const setup = ({ props, event }: any) => ({
-  e: createEvent(event),
-  result: renderLink(props),
-  onClick: props.onClick || jest.fn(),
-});
+function ThemedLink(props: LinkProps & AnchorHTMLAttributes<HTMLAnchorElement>) {
+  return (
+    <ThemeProvider theme={convert(themes.light)}>
+      <Link {...props} />
+    </ThemeProvider>
+  );
+}
 
 describe('Link', () => {
   describe('events', () => {
     it('should call onClick on a plain left click', () => {
-      const { result, onClick, e } = setup({
-        props: { onClick: jest.fn() },
-        event: { button: LEFT_BUTTON },
-      });
-
-      result.simulate('click', e);
-
-      expect(onClick).toHaveBeenCalledWith(e);
-      expect(e.preventDefault).toHaveBeenCalled();
+      const handleClick = jest.fn();
+      render(<ThemedLink onClick={handleClick}>Content</ThemedLink>);
+      userEvent.click(screen.getByText('Content'), { button: LEFT_BUTTON });
+      expect(handleClick).toHaveBeenCalled();
     });
 
     it("shouldn't call onClick on a middle click", () => {
-      const { result, onClick, e } = setup({
-        props: { onClick: jest.fn() },
-        event: { button: MIDDLE_BUTTON },
-      });
-
-      result.simulate('click', e);
-
-      expect(onClick).not.toHaveBeenCalled();
-      expect(e.preventDefault).not.toHaveBeenCalled();
+      const handleClick = jest.fn();
+      render(<ThemedLink onClick={handleClick}>Content</ThemedLink>);
+      userEvent.click(screen.getByText('Content'), { button: MIDDLE_BUTTON });
+      expect(handleClick).not.toHaveBeenCalled();
     });
 
     it("shouldn't call onClick on a right click", () => {
-      const { result, onClick, e } = setup({
-        props: { onClick: jest.fn() },
-        event: { button: RIGHT_BUTTON },
-      });
-
-      result.simulate('click', e);
-
-      expect(onClick).not.toHaveBeenCalled();
-      expect(e.preventDefault).not.toHaveBeenCalled();
+      const handleClick = jest.fn();
+      render(<ThemedLink onClick={handleClick}>Content</ThemedLink>);
+      userEvent.click(screen.getByText('Content'), { button: RIGHT_BUTTON });
+      expect(handleClick).not.toHaveBeenCalled();
     });
 
     it("shouldn't call onClick on alt+click", () => {
-      const { result, onClick, e } = setup({
-        props: { onClick: jest.fn() },
-        event: { altKey: true },
-      });
-
-      result.simulate('click', e);
-
-      expect(onClick).not.toHaveBeenCalled();
-      expect(e.preventDefault).not.toHaveBeenCalled();
+      const handleClick = jest.fn();
+      render(<ThemedLink onClick={handleClick}>Content</ThemedLink>);
+      userEvent.click(screen.getByText('Content'), { altKey: true });
+      expect(handleClick).not.toHaveBeenCalled();
     });
 
     it("shouldn't call onClick on ctrl+click", () => {
-      const { result, onClick, e } = setup({
-        props: { onClick: jest.fn() },
-        event: { ctrlKey: true },
-      });
-
-      result.simulate('click', e);
-
-      expect(onClick).not.toHaveBeenCalled();
-      expect(e.preventDefault).not.toHaveBeenCalled();
+      const handleClick = jest.fn();
+      render(<ThemedLink onClick={handleClick}>Content</ThemedLink>);
+      userEvent.click(screen.getByText('Content'), { ctrlKey: true });
+      expect(handleClick).not.toHaveBeenCalled();
     });
 
     it("shouldn't call onClick on cmd+click / win+click", () => {
-      const { result, onClick, e } = setup({
-        props: { onClick: jest.fn() },
-        event: { metaKey: true },
-      });
-
-      result.simulate('click', e);
-
-      expect(onClick).not.toHaveBeenCalled();
-      expect(e.preventDefault).not.toHaveBeenCalled();
+      const handleClick = jest.fn();
+      render(<ThemedLink onClick={handleClick}>Content</ThemedLink>);
+      userEvent.click(screen.getByText('Content'), { metaKey: true });
+      expect(handleClick).not.toHaveBeenCalled();
     });
 
     it("shouldn't call onClick on shift+click", () => {
-      const { result, onClick, e } = setup({
-        props: { onClick: jest.fn() },
-        event: { shiftKey: true },
-      });
-
-      result.simulate('click', e);
-
-      expect(onClick).not.toHaveBeenCalled();
-      expect(e.preventDefault).not.toHaveBeenCalled();
+      const handleClick = jest.fn();
+      render(<ThemedLink onClick={handleClick}>Content</ThemedLink>);
+      userEvent.click(screen.getByText('Content'), { shiftKey: true });
+      expect(handleClick).not.toHaveBeenCalled();
     });
   });
 });

lib/components/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "rootDir": "./src",
     "types": [
-      "jest"
+      "jest", "@testing-library/jest-dom"
     ]
   },
   "include": [