[WC-2954]: Migrate tests from enzyme to react-testing-library (#1527)

Author: samuelreichert

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

@@ -38,7 +38,7 @@
         "publish-marketplace": "rui-publish-marketplace",
         "release": "pluggable-widgets-tools release:web",
         "start": "pluggable-widgets-tools start:server",
-        "test": "pluggable-widgets-tools test:unit:web",
+        "test": "jest --projects jest.config.js",
         "update-changelog": "rui-update-changelog-widget",
         "verify": "rui-verify-package-format"
     },

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

@@ -117,6 +117,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__/Accordion.spec.tsx

@@ -1,6 +1,6 @@
+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", () => {
@@ -13,39 +13,43 @@ describe("Header", () => {
         };
     });
 
+    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.asFragment()).toMatchSnapshot();
     });
 
     it("renders h2", () => {
-        const headerWrapper = shallow(<Header {...defaultHeaderProps} heading="headingTwo" />);
+        const header = renderHeader({ heading: "headingTwo" });
 
-        expect(headerWrapper).toMatchSnapshot();
+        expect(header.asFragment()).toMatchSnapshot();
     });
 
     it("renders h3", () => {
-        const headerWrapper = shallow(<Header {...defaultHeaderProps} />);
+        const header = renderHeader();
 
-        expect(headerWrapper).toMatchSnapshot();
+        expect(header.asFragment()).toMatchSnapshot();
     });
 
     it("renders h4", () => {
-        const headerWrapper = shallow(<Header {...defaultHeaderProps} heading="headingFour" />);
+        const header = renderHeader({ heading: "headingFour" });
 
-        expect(headerWrapper).toMatchSnapshot();
+        expect(header.asFragment()).toMatchSnapshot();
     });
 
     it("renders h5", () => {
-        const headerWrapper = shallow(<Header {...defaultHeaderProps} heading="headingFive" />);
+        const header = renderHeader({ heading: "headingFive" });
 
-        expect(headerWrapper).toMatchSnapshot();
+        expect(header.asFragment()).toMatchSnapshot();
     });
 
     it("renders h6", () => {
-        const headerWrapper = shallow(<Header {...defaultHeaderProps} heading="headingSix" />);
+        const header = renderHeader({ heading: "headingSix" });
 
-        expect(headerWrapper).toMatchSnapshot();
+        expect(header.asFragment()).toMatchSnapshot();
     });
 });

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

@@ -1,5 +1,6 @@
+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", () => {
@@ -13,53 +14,64 @@ describe("Icon", () => {
         };
     });
 
-    it("renders glyph icons", () => {
-        const iconWrapper = render(<Icon {...defaultIconProps} />);
+    function renderIcon(props: Partial<IconProps> = {}): RenderResult {
+        return render(<Icon {...defaultIconProps} {...props} />);
+    }
 
-        expect(iconWrapper).toMatchSnapshot();
-    });
-
-    it("renders image icons", () => {
-        const iconWrapper = render(<Icon {...defaultIconProps} data={{ type: "image", iconUrl: "icon.url" }} />);
-
-        expect(iconWrapper).toMatchSnapshot();
-    });
-
-    it("renders a default icon", () => {
-        const iconWrapper = render(<Icon {...defaultIconProps} data={undefined} />);
+    describe("Rendering", () => {
+        it("renders glyph icons", () => {
+            const icon = renderIcon();
 
-        expect(iconWrapper).toMatchSnapshot();
-    });
+            expect(icon.asFragment()).toMatchSnapshot();
+        });
 
-    it("doesn't render a default icon while loading", () => {
-        const iconWrapper = render(<Icon {...defaultIconProps} data={undefined} loading />);
+        it("renders image icons", () => {
+            const icon = renderIcon({ data: { type: "image", iconUrl: "icon.url" } });
 
-        expect(iconWrapper).toMatchSnapshot();
-    });
+            expect(icon.asFragment()).toMatchSnapshot();
+        });
 
-    it("doesn't render an icon with an unknown icon data type", () => {
-        const iconWrapper = render(<Icon {...defaultIconProps} data={{ type: "unknown" } as any} />);
+        it("renders a default icon", () => {
+            const icon = renderIcon({ data: undefined });
 
-        expect(iconWrapper).toMatchSnapshot();
-    });
+            expect(icon.asFragment()).toMatchSnapshot();
+        });
 
-    it("doesn't apply an animate class to a glyph icon when animate is false", () => {
-        const iconWrapper = mount(<Icon {...defaultIconProps} animate={false} />);
+        it("doesn't render a default icon while loading", () => {
+            const icon = renderIcon({ data: undefined, loading: true });
 
-        expect(iconWrapper.find("span").prop("className")).not.toContain("widget-accordion-group-header-icon-animate");
-    });
+            expect(icon.asFragment()).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} />
-        );
+        it("doesn't render an icon with an unknown icon data type", () => {
+            const icon = renderIcon({ data: { type: "unknown" } as any });
 
-        expect(iconWrapper.find("img").prop("className")).not.toContain("widget-accordion-group-header-icon-animate");
+            expect(icon.asFragment()).toMatchSnapshot();
+        });
     });
 
-    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");
+        });
     });
 });