feat: update to React 18

Updates react to v18 and testing-library to latest version Some tests needed refactor because of breaking changes
kiwicom · Aug 18, 2023 · 45be262 · 45be262
1 parent d7eafbf
commit 45be262
Show file tree

Hide file tree

Showing 75 changed files with 1,821 additions and 2,470 deletions.
diff --git a/.github/contribution/testing-conventions.md b/.github/contribution/testing-conventions.md
@@ -8,20 +8,23 @@ Test files should generally consist of one root `describe` block which is named
 
 ```jsx
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import Button from "../";
 
 describe("Button", () => {
+  const user = userEvent.setup();
+
   it("should be accessible", () => {
     render(<Button>Click me</Button>);
     expect(screen.getByRole("button", { name: "Click me" })).toBeInTheDocument();
   });
   it("should trigger the click handler", () => {
     const onClick = jest.fn();
     render(<Button onClick={onClick}>Click me</Button>);
-    userEvent.click(screen.getByRole("button", { name: "Click me" }));
+
+    act(() => user.click(screen.getByRole("button", { name: "Click me" })));
     expect(onClick).toHaveBeenCalled();
   });
   describe("when disabled", () => {
@@ -32,7 +35,8 @@ describe("Button", () => {
           Click me
         </Button>,
       );
-      userEvent.click(screen.getByRole("button", { name: "Click me" }));
+
+      act(() => user.click(screen.getByRole("button", { name: "Click me" })));
       expect(onClick).not.toHaveBeenCalled();
     });
   });
@@ -55,15 +59,18 @@ import userEvent from "@testing-library/user-event";
 import Button from "../";
 
 describe("Button", () => {
+  const user = userEvent.setup();
+
   it("default", () => {
     const onClick = jest.fn();
     render(
       <Button onClick={onClick}>
         Click me {/* it's not necessary to save this into a variable */}
       </Button>,
     );
+
     const button = screen.getByRole("button");
-    userEvent.click(button);
+    act(() => user.click(button));
     expect(button).toHaveTextContent("Click me"); // you can just repeat it
     expect(onClick).toHaveBeenCalled();
   });

diff --git a/docs/__tests__/__snapshots__/gatsby-node.test.ts.snap b/docs/__tests__/__snapshots__/gatsby-node.test.ts.snap
@@ -1,27 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`gatsby-node registering documents should create breadcrumb nodes 1`] = `
-Array [
-  Object {
-    "breadcrumbs": Array [
-      Object {
+[
+  {
+    "breadcrumbs": [
+      {
         "name": "Getting started",
         "url": "/getting-started/",
       },
-      Object {
+      {
         "name": "For designers",
         "url": "/getting-started/for-designers/",
       },
     ],
     "file": "01-getting-started/01-for-designers/01-kiwi.mdx",
   },
-  Object {
-    "breadcrumbs": Array [
-      Object {
+  {
+    "breadcrumbs": [
+      {
         "name": "Getting started",
         "url": "/getting-started/",
       },
-      Object {
+      {
         "name": "For developers",
         "url": "/getting-started/for-developers/",
       },

diff --git a/docs/__tests__/gatsby-node.test.ts b/docs/__tests__/gatsby-node.test.ts
@@ -115,9 +115,9 @@ describe("gatsby-node", () => {
       // @ts-expect-error TODO
       await onCreateNode({ cache, node, reporter });
       expect(reporter.panicOnBuild.mock.calls).toMatchInlineSnapshot(`
-        Array [
-          Array [
-            "Expected meta.yml file to exist in \\"docs/src/documentation/01-getting-started\\", every directory in \\"src/documentation\\" should have one",
+        [
+          [
+            "Expected meta.yml file to exist in "docs/src/documentation/01-getting-started", every directory in "src/documentation" should have one",
           ],
         ]
       `);
@@ -138,9 +138,9 @@ describe("gatsby-node", () => {
       await onCreateNode({ cache, node, reporter });
       // first time for "title", second for "type"
       expect(reporter.panicOnBuild.mock.calls).toMatchInlineSnapshot(`
-        Array [
-          Array [
-            "Expected \\"docs/src/documentation/01-getting-started/meta.yml\\" to contain fields: title, type",
+        [
+          [
+            "Expected "docs/src/documentation/01-getting-started/meta.yml" to contain fields: title, type",
           ],
         ]
       `);
@@ -162,9 +162,9 @@ describe("gatsby-node", () => {
       await onCreateNode({ cache, node, reporter });
       // first time for "title", second for "type"
       expect(reporter.panicOnBuild.mock.calls).toMatchInlineSnapshot(`
-        Array [
-          Array [
-            "Expected the value of \\"type\\" in \\"docs/src/documentation/01-getting-started/meta.yml\\" to be one of: folder, tabs",
+        [
+          [
+            "Expected the value of "type" in "docs/src/documentation/01-getting-started/meta.yml" to be one of: folder, tabs",
           ],
         ]
       `);
@@ -263,27 +263,27 @@ describe("gatsby-node", () => {
       });
 
       expect(createPage.mock.calls).toMatchInlineSnapshot(`
-        Array [
-          Array [
-            Object {
+        [
+          [
+            {
               "component": "docs/src/templates/Overview.tsx",
-              "context": Object {
-                "breadcrumbs": Array [
-                  Object {
+              "context": {
+                "breadcrumbs": [
+                  {
                     "name": "Getting started",
                     "url": "/getting-started/",
                   },
                 ],
                 "description": undefined,
                 "idx": 1,
-                "pages": Array [
-                  Object {
+                "pages": [
+                  {
                     "description": "Our components are served as an npm package.",
                     "idx": 1,
                     "slug": "/getting-started/for-developers/",
                     "title": "For developers",
                   },
-                  Object {
+                  {
                     "description": undefined,
                     "hasReactTab": false,
                     "idx": 1,
@@ -297,20 +297,20 @@ describe("gatsby-node", () => {
               "path": "/getting-started/",
             },
           ],
-          Array [
-            Object {
+          [
+            {
               "component": "docs/src/templates/Overview.tsx",
-              "context": Object {
-                "breadcrumbs": Array [
-                  Object {
+              "context": {
+                "breadcrumbs": [
+                  {
                     "name": "Components",
                     "url": "/components/",
                   },
                 ],
                 "description": undefined,
                 "idx": 3,
-                "pages": Array [
-                  Object {
+                "pages": [
+                  {
                     "description": undefined,
                     "idx": 4,
                     "slug": "/components/overlay/",
@@ -323,24 +323,24 @@ describe("gatsby-node", () => {
               "path": "/components/",
             },
           ],
-          Array [
-            Object {
+          [
+            {
               "component": "docs/src/templates/Overview.tsx",
-              "context": Object {
-                "breadcrumbs": Array [
-                  Object {
+              "context": {
+                "breadcrumbs": [
+                  {
                     "name": "Components",
                     "url": "/components/",
                   },
-                  Object {
+                  {
                     "name": "Overlay",
                     "url": "/components/overlay/",
                   },
                 ],
                 "description": undefined,
                 "idx": 4,
-                "pages": Array [
-                  Object {
+                "pages": [
+                  {
                     "description": "Prompts users to take or complete an action.",
                     "hasReactTab": false,
                     "idx": 0,

diff --git a/docs/src/components/ComponentStructure/__tests__/index.test.tsx b/docs/src/components/ComponentStructure/__tests__/index.test.tsx
@@ -1,11 +1,11 @@
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import ComponentStructure from "..";
 
-const structure = platform => ({
-  Image: props => <svg {...props} />,
+const structure = (platform: string) => ({
+  Image: (props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>) => <svg {...props} />,
   imageWidth: 124,
   parts: [
     {
@@ -20,6 +20,8 @@ const structure = platform => ({
 });
 
 describe("ComponentStructure", () => {
+  const user = userEvent.setup();
+
   it("should have expected DOM", async () => {
     render(
       <ComponentStructure
@@ -45,7 +47,7 @@ describe("ComponentStructure", () => {
     screen.getByText(/WebTwo/);
   });
 
-  it("should open tab on click", () => {
+  it("should open tab on click", async () => {
     render(
       <ComponentStructure
         component="Test"
@@ -55,11 +57,11 @@ describe("ComponentStructure", () => {
       />,
     );
 
-    userEvent.click(screen.getByRole("tab", { name: "iOS" }));
+    await act(() => user.click(screen.getByRole("tab", { name: "iOS" })));
     screen.getByText(/iOSOne/);
   });
 
-  it("should move focus along tabs when pressing arrow keys", () => {
+  it("should move focus along tabs when pressing arrow keys", async () => {
     render(
       <ComponentStructure
         component="Test"
@@ -73,31 +75,39 @@ describe("ComponentStructure", () => {
     const tabIOS = screen.getByRole("tab", { name: "iOS" });
     const tabAndroid = screen.getByRole("tab", { name: "Android" });
 
-    userEvent.tab();
+    await act(() => user.tab());
     expect(tabWeb).toHaveFocus();
 
-    userEvent.keyboard("{ArrowRight}");
+    await act(async () => {
+      await user.keyboard("{ArrowRight}");
+    });
     expect(tabIOS).toHaveFocus();
 
     expect(tabWeb).toHaveAttribute("tabindex", "-1");
     expect(tabIOS).toHaveAttribute("tabindex", "0");
     expect(tabAndroid).toHaveAttribute("tabindex", "-1");
 
-    userEvent.keyboard("{ArrowLeft}");
+    await act(async () => {
+      await user.keyboard("{ArrowLeft}");
+    });
     expect(tabWeb).toHaveFocus();
 
     expect(tabWeb).toHaveAttribute("tabindex", "0");
     expect(tabIOS).toHaveAttribute("tabindex", "-1");
     expect(tabAndroid).toHaveAttribute("tabindex", "-1");
 
-    userEvent.keyboard("{ArrowLeft}");
+    await act(async () => {
+      await user.keyboard("{ArrowLeft}");
+    });
     expect(tabAndroid).toHaveFocus();
 
     expect(tabWeb).toHaveAttribute("tabindex", "-1");
     expect(tabIOS).toHaveAttribute("tabindex", "-1");
     expect(tabAndroid).toHaveAttribute("tabindex", "0");
 
-    userEvent.keyboard("{ArrowRight}");
+    await act(async () => {
+      await user.keyboard("{ArrowRight}");
+    });
     expect(tabWeb).toHaveFocus();
 
     expect(tabWeb).toHaveAttribute("tabindex", "0");