chore: fix and migrate unit tests to vitest

apps/scandic-web/components/TempDesignSystem/Form/Date/date.test.tsx

@@ -1,28 +1,24 @@
 /* eslint-disable formatjs/no-literal-string-in-jsx */
 
-import { describe, expect, test } from "@jest/globals" // importing because of type conflict with globals from Cypress
-import { render, screen } from "@testing-library/react"
-import { type UserEvent, userEvent } from "@testing-library/user-event"
+import { User } from "@react-aria/test-utils"
+import { userEvent } from "@testing-library/user-event"
 import { FormProvider, useForm } from "react-hook-form"
+import { afterEach, describe, expect, test } from "vitest"
 
 import { Lang } from "@scandic-hotels/common/constants/language"
 import { dt } from "@scandic-hotels/common/dt"
 
+import { cleanup, render, screen } from "@/tests/utils"
 import { getLocalizedMonthName } from "@/utils/dateFormatting"
 
 import Date from "./index"
 
-jest.mock("react-intl", () => ({
-  useIntl: () => ({
-    formatMessage: (message: { id: string }) => message.id,
-    formatNumber: (value: number) => value,
-  }),
-}))
+const testUtilUser = new User({ interactionType: "touch" })
 
 interface FormWrapperProps {
   defaultValues: Record<string, unknown>
   children: React.ReactNode
-  onSubmit: (data: unknown) => void
+  onSubmit: (event: unknown) => void
 }
 
 function FormWrapper({ defaultValues, children, onSubmit }: FormWrapperProps) {
@@ -31,7 +27,7 @@ function FormWrapper({ defaultValues, children, onSubmit }: FormWrapperProps) {
   })
   return (
     <FormProvider {...methods}>
-      <form onSubmit={methods.handleSubmit((data) => onSubmit(data))}>
+      <form onSubmit={methods.handleSubmit(onSubmit)}>
         {children}
         <button type="submit">Submit</button>
       </form>
@@ -39,19 +35,13 @@ function FormWrapper({ defaultValues, children, onSubmit }: FormWrapperProps) {
   )
 }
 
-async function selectOption(user: UserEvent, name: RegExp, value: string) {
-  // since its not a proper Select element selectOptions from userEvent doesn't work
-  const select = screen.queryByRole("button", { name })
-  if (select) {
-    await user.click(select)
+function selectOption(name: string, value: string) {
+  const selectTester = testUtilUser.createTester("Select", {
+    root: screen.getByTestId(name),
+    interactionType: "touch",
+  })
 
-    const option = screen.queryByRole("option", { name: value })
-    if (option) {
-      await user.click(option)
-    } else {
-      await user.click(select) // click select again to close it
-    }
-  }
+  selectTester.selectOption({ option: value })
 }
 
 const testCases = [
@@ -112,16 +102,19 @@ const testCases = [
 ]
 
 describe("Date input", () => {
+  afterEach(cleanup)
+
   test.each(testCases)(
     "$description",
     async ({ defaultValue, dateOfBirth, expectedOutput }) => {
       const user = userEvent.setup()
-      const handleSubmit = jest.fn()
 
       render(
         <FormWrapper
           defaultValues={{ dateOfBirth: defaultValue }}
-          onSubmit={handleSubmit}
+          onSubmit={(data) => {
+            expect(data).toEqual(expectedOutput)
+          }}
         >
           <Date name="dateOfBirth" />
         </FormWrapper>
@@ -132,16 +125,12 @@ describe("Date input", () => {
       const month = date.getMonth() + 1
       const day = date.getDate()
 
-      await selectOption(user, /year/i, year.toString())
-      await selectOption(user, /month/i, getLocalizedMonthName(month, Lang.en))
-      await selectOption(user, /day/i, day.toString())
+      selectOption("year", year.toString())
+      selectOption("month", getLocalizedMonthName(month, Lang.en))
+      selectOption("day", day.toString())
 
       const submitButton = screen.getByRole("button", { name: /submit/i })
       await user.click(submitButton)
-
-      expect(handleSubmit).toHaveBeenCalledWith(
-        expect.objectContaining(expectedOutput)
-      )
     }
   )
 })