WIP: Migrate tests from enzyme to react-testing-library

packages/pluggableWidgets/accordion-web/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    ...require("@mendix/pluggable-widgets-tools/test-config/jest.enzyme-free.config.js")
+};

packages/pluggableWidgets/accordion-web/package.json

@@ -32,7 +32,7 @@
         "build": "pluggable-widgets-tools build:web",
         "format": "prettier --write .",
         "lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
-        "test": "pluggable-widgets-tools test:unit:web",
+        "test": "jest --projects jest.config.js",
         "release": "pluggable-widgets-tools release:web",
         "create-gh-release": "rui-create-gh-release",
         "create-translation": "rui-create-translation",

packages/pluggableWidgets/accordion-web/src/components/AccordionGroup.tsx

@@ -119,6 +119,7 @@ export function AccordionGroup(props: AccordionGroupProps): ReactElement | null
             switch (event.key) {
                 case "Enter":
                 case " ":
+                case "Space":
                     event.preventDefault();
                     toggleCollapsed?.();
                     break;

packages/pluggableWidgets/accordion-web/src/components/__tests__/Header.spec.tsx

@@ -1,51 +1,51 @@
+import "@testing-library/jest-dom";
+import { render, RenderResult } from "@testing-library/react";
 import { createElement, PropsWithChildren } from "react";
-import { shallow } from "enzyme";
-
 import { Header, HeaderProps } from "../Header";
 
 describe("Header", () => {
-    let defaultHeaderProps: PropsWithChildren<HeaderProps>;
+    const defaultHeaderProps: PropsWithChildren<HeaderProps> = {
+        heading: "headingThree",
+        children: "Text"
+    };
 
-    beforeEach(() => {
-        defaultHeaderProps = {
-            heading: "headingThree",
-            children: "Text"
-        };
-    });
+    function renderHeader(props: Partial<HeaderProps> = {}): RenderResult {
+        return render(<Header {...defaultHeaderProps} {...props} />);
+    }
 
     it("renders h1", () => {
-        const headerWrapper = shallow(<Header {...defaultHeaderProps} heading="headingOne" />);
+        const header = renderHeader({ heading: "headingOne" });
 
-        expect(headerWrapper).toMatchSnapshot();
+        expect(header.container).toMatchSnapshot();
     });
 
     it("renders h2", () => {
-        const headerWrapper = shallow(<Header {...defaultHeaderProps} heading="headingTwo" />);
+        const header = renderHeader({ heading: "headingTwo" });
 
-        expect(headerWrapper).toMatchSnapshot();
+        expect(header.container).toMatchSnapshot();
     });
 
     it("renders h3", () => {
-        const headerWrapper = shallow(<Header {...defaultHeaderProps} />);
+        const header = renderHeader();
 
-        expect(headerWrapper).toMatchSnapshot();
+        expect(header.container).toMatchSnapshot();
     });
 
     it("renders h4", () => {
-        const headerWrapper = shallow(<Header {...defaultHeaderProps} heading="headingFour" />);
+        const header = renderHeader({ heading: "headingFour" });
 
-        expect(headerWrapper).toMatchSnapshot();
+        expect(header.container).toMatchSnapshot();
     });
 
     it("renders h5", () => {
-        const headerWrapper = shallow(<Header {...defaultHeaderProps} heading="headingFive" />);
+        const header = renderHeader({ heading: "headingFive" });
 
-        expect(headerWrapper).toMatchSnapshot();
+        expect(header.container).toMatchSnapshot();
     });
 
     it("renders h6", () => {
-        const headerWrapper = shallow(<Header {...defaultHeaderProps} heading="headingSix" />);
+        const header = renderHeader({ heading: "headingSix" });
 
-        expect(headerWrapper).toMatchSnapshot();
+        expect(header.container).toMatchSnapshot();
     });
 });

packages/pluggableWidgets/accordion-web/src/components/__tests__/Icon.spec.tsx

@@ -1,65 +1,73 @@
+import "@testing-library/jest-dom";
+import { render, RenderResult } from "@testing-library/react";
 import { createElement } from "react";
-import { mount, render } from "enzyme";
 import { Icon, IconProps } from "../Icon";
 
 describe("Icon", () => {
-    let defaultIconProps: IconProps;
-
-    beforeEach(() => {
-        defaultIconProps = {
-            data: { type: "glyph", iconClass: "icon-class" },
-            loading: false,
-            animate: true
-        };
-    });
+    const defaultIconProps: IconProps = {
+        data: { type: "glyph", iconClass: "icon-class" },
+        loading: false,
+        animate: true
+    };
 
-    it("renders glyph icons", () => {
-        const iconWrapper = render(<Icon {...defaultIconProps} />);
+    function renderIcon(props: Partial<IconProps> = {}): RenderResult {
+        return render(<Icon {...defaultIconProps} {...props} />);
+    }
 
-        expect(iconWrapper).toMatchSnapshot();
-    });
+    describe("Rendering", () => {
+        it("renders glyph icons", () => {
+            const icon = renderIcon();
 
-    it("renders image icons", () => {
-        const iconWrapper = render(<Icon {...defaultIconProps} data={{ type: "image", iconUrl: "icon.url" }} />);
+            expect(icon.container).toMatchSnapshot();
+        });
 
-        expect(iconWrapper).toMatchSnapshot();
-    });
+        it("renders image icons", () => {
+            const icon = renderIcon({ data: { type: "image", iconUrl: "icon.url" } });
 
-    it("renders a default icon", () => {
-        const iconWrapper = render(<Icon {...defaultIconProps} data={undefined} />);
+            expect(icon.container).toMatchSnapshot();
+        });
 
-        expect(iconWrapper).toMatchSnapshot();
-    });
+        it("renders a default icon", () => {
+            const icon = renderIcon({ data: undefined });
 
-    it("doesn't render a default icon while loading", () => {
-        const iconWrapper = render(<Icon {...defaultIconProps} data={undefined} loading />);
+            expect(icon.container).toMatchSnapshot();
+        });
 
-        expect(iconWrapper).toMatchSnapshot();
-    });
+        it("doesn't render a default icon while loading", () => {
+            const icon = renderIcon({ data: undefined, loading: true });
 
-    it("doesn't render an icon with an unknown icon data type", () => {
-        const iconWrapper = render(<Icon {...defaultIconProps} data={{ type: "unknown" } as any} />);
+            expect(icon.container).toMatchSnapshot();
+        });
 
-        expect(iconWrapper).toMatchSnapshot();
-    });
+        it("doesn't render an icon with an unknown icon data type", () => {
+            const icon = renderIcon({ data: { type: "unknown" } as any });
 
-    it("doesn't apply an animate class to a glyph icon when animate is false", () => {
-        const iconWrapper = mount(<Icon {...defaultIconProps} animate={false} />);
-
-        expect(iconWrapper.find("span").prop("className")).not.toContain("widget-accordion-group-header-icon-animate");
+            expect(icon.container).toMatchSnapshot();
+        });
     });
 
-    it("doesn't apply an animate class to an image icon when animate is false", () => {
-        const iconWrapper = mount(
-            <Icon {...defaultIconProps} data={{ type: "image", iconUrl: "icon.url" }} animate={false} />
-        );
-
-        expect(iconWrapper.find("img").prop("className")).not.toContain("widget-accordion-group-header-icon-animate");
-    });
-
-    it("doesn't apply an animate class to a default icon when animate is false", () => {
-        const iconWrapper = mount(<Icon {...defaultIconProps} data={undefined} animate={false} />);
-
-        expect(iconWrapper.find("svg").prop("className")).not.toContain("widget-accordion-group-header-icon-animate");
+    describe("Animation Behaviour", () => {
+        it("doesn't apply an animate class to a glyph icon when animate is false", () => {
+            const icon = renderIcon({ animate: false });
+            const spanElement = icon.container.querySelector("span");
+
+            expect(spanElement).not.toHaveClass("widget-accordion-group-header-icon-animate");
+        });
+
+        it("doesn't apply an animate class to an image icon when animate is false", () => {
+            const icon = renderIcon({
+                data: { type: "image", iconUrl: "icon.url" },
+                animate: false
+            });
+            const imgElement = icon.container.querySelector("img");
+
+            expect(imgElement).not.toHaveClass("widget-accordion-group-header-icon-animate");
+        });
+
+        it("doesn't apply an animate class to a default icon when animate is false", () => {
+            const icon = renderIcon({ data: undefined, animate: false });
+            const svgElement = icon.container.querySelector("svg");
+            expect(svgElement).not.toHaveClass("widget-accordion-group-header-icon-animate");
+        });
     });
 });