feat(SW-360): Added test for register user form

components/Forms/Register/index.tsx

@@ -48,7 +48,6 @@ export default function Form() {
   const zipCode = intl.formatMessage({ id: "Zip code" })
 
   async function handleSubmit(data: RegisterSchema) {
-    console.log("submit", data)
     const isSuccessResponse = await registerUser(data)
     if (!isSuccessResponse) {
       toast.error("Something went wrong!")
@@ -66,11 +65,6 @@ export default function Form() {
     <section className={styles.container}>
       <FormProvider {...methods}>
         <form
-          /**
-           * Ignoring since ts doesn't recognize that tRPC
-           * parses FormData before reaching the route
-           * @ts-ignore */
-          action={registerUser}
           className={styles.form}
           id="register"
           onSubmit={methods.handleSubmit(handleSubmit)}

components/Forms/Register/register.test.tsx

@@ -0,0 +1,68 @@
+import { expect } from "@jest/globals"
+import { render, screen, waitFor } from "@testing-library/react"
+import { userEvent } from "@testing-library/user-event"
+
+import { registerUser } from "@/actions/registerUser"
+
+import Form from "./index"
+
+// Mock server action to prevent api calls
+jest.mock("@/actions/registerUser", () => ({
+  registerUser: jest.fn().mockResolvedValue(true),
+}))
+
+describe("Register user form", () => {
+  test("Should submit form with correct data", async () => {
+    render(<Form />)
+
+    const values = {
+      firstName: "John",
+      lastName: "Doe",
+      dateOfBirth: "1990-01-08",
+      address: {
+        zipCode: "11111",
+        countryCode: "SE",
+      },
+      email: "john.doe@example.com",
+      phoneNumber: "+46123456789",
+      password: "securePassword123!",
+      termsAccepted: true,
+    }
+
+    await userEvent.type(screen.getByTestId("firstName"), values.firstName)
+    await userEvent.type(screen.getByTestId("lastName"), values.lastName)
+
+    const dateOfBirthInput = screen.getByTestId("dateOfBirth")
+    const daySelect = dateOfBirthInput.querySelector("select[name='date']")!
+    const monthSelect = dateOfBirthInput.querySelector("select[name='month']")!
+    const yearSelect = dateOfBirthInput.querySelector("select[name='year']")!
+
+    await userEvent.selectOptions(daySelect, "1")
+    await userEvent.selectOptions(monthSelect, "1")
+    await userEvent.selectOptions(yearSelect, "1990")
+
+    await userEvent.type(
+      screen.getByTestId("address.zipCode"),
+      values.address.zipCode
+    )
+
+    const countryInput = screen.getByLabelText("Select a country")
+    await userEvent.click(countryInput)
+    await userEvent.type(countryInput, "Sweden")
+    await userEvent.keyboard("{ArrowDown}{Enter}")
+
+    await userEvent.type(screen.getByTestId("email"), values.email)
+    await userEvent.type(
+      screen.getByTestId("phoneNumber"),
+      values.phoneNumber.slice(3)
+    )
+    await userEvent.type(screen.getByTestId("password"), values.password)
+    await userEvent.click(screen.getAllByTestId("termsAccepted")[0])
+
+    await userEvent.click(screen.getByTestId("submit"))
+
+    await waitFor(() => {
+      expect(registerUser).toHaveBeenCalledWith(values)
+    })
+  })
+})

jest.config.ts

@@ -154,7 +154,7 @@ const config: Config = {
   // snapshotSerializers: [],
 
   // The test environment that will be used for testing
-  // testEnvironment: "jest-environment-node",
+  testEnvironment: "jsdom",
 
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},

jest.setup.ts

@@ -1 +1,12 @@
 import "@testing-library/jest-dom"
+
+jest.mock("react-intl", () => ({
+  useIntl: () => ({
+    formatMessage: (message: { id: string }) => message.id,
+  }),
+}))
+
+jest.mock("next/navigation", () => ({
+  useRouter: jest.fn(),
+  usePathname: jest.fn().mockReturnValue("/"),
+}))

package-lock.json

@@ -60,6 +60,7 @@
         "@svgr/webpack": "^8.1.0",
         "@testing-library/jest-dom": "^6.4.6",
         "@testing-library/react": "^16.0.0",
+        "@testing-library/user-event": "^14.5.2",
         "@types/jest": "^29.5.12",
         "@types/node": "^20",
         "@types/react": "^18",
@@ -6167,6 +6168,19 @@
         }
       }
     },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.5.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz",
+      "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",

package.json

@@ -76,6 +76,7 @@
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/node": "^20",
     "@types/react": "^18",