Migrate to vitest

package.json

@@ -23,7 +23,7 @@
     "lint": "yarn lint:js && yarn lint:styles",
     "lint:js": "eslint --max-warnings=0 .",
     "lint:styles": "npx stylelint \"**/*.css\"",
-    "test": "jest",
+    "test": "vitest",
     "prepercy": "node scripts/disableStoryStore7.js && yarn build-storybook",
     "percy": "percy storybook ./storybook-static",
     "postpercy": "git checkout .storybook/main.ts",
@@ -64,7 +64,6 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.1",
     "@types/lodash-es": "^4.17.7",
     "@types/node": "^18.16.0",
     "@types/react": "^18.0.38",
@@ -80,9 +79,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-storybook": "^0.6.12",
-    "jest": "^29.5.0",
-    "jest-css-modules": "^2.1.0",
-    "jest-environment-jsdom": "^29.5.0",
+    "jsdom": "^22.1.0",
     "prettier": "^2.8.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -93,9 +90,10 @@
     "stylelint": "^15.2.0",
     "stylelint-config-standard": "^30.0.1",
     "typescript": "^5.1.6",
-    "vite": "^4.3.5",
+    "vite": "^4.4.8",
     "vite-plugin-dts": "^3.4.0",
-    "vite-plugin-svgr": "^3.2.0"
+    "vite-plugin-svgr": "^3.2.0",
+    "vitest": "^0.33.0"
   },
   "dependencies": {
     "@radix-ui/react-form": "^0.0.2",

src/components/ActionControl/ActionControl.test.tsx

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { vi, describe, it, expect } from "vitest";
 import { fireEvent, getByLabelText, render } from "@testing-library/react";
 import React from "react";
 
@@ -35,7 +36,7 @@ describe("ActionControl", () => {
   });
 
   it("trigger the action", () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
 
     const { container } = render(
       <ActionControl

src/components/ActionControl/__snapshots__/ActionControl.test.tsx.snap

@@ -1,32 +1,46 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`ActionControl renders 1`] = `
+exports[`ActionControl > renders 1`] = `
 <DocumentFragment>
   <form
-    class="root"
+    class="_root_dc87d2"
   >
     <div
-      class="field"
+      class="_field_dc87d2"
     >
       <div
-        class="actioncontrol"
+        class="_actioncontrol_b007d7"
       >
         <input
           autocomplete="off"
           autocorrect="off"
-          class="control input"
+          class="_control_dc87d2 _input_b007d7"
           id=":r1:"
           name="action"
           title=""
         />
         <svg
           aria-controls=":r1:"
           aria-label="Click me!"
-          class="icon"
+          class="_icon_b007d7"
+          fill="none"
           height="24"
           role="button"
+          viewBox="0 0 18 18"
           width="24"
-        />
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5 5.25a.75.75 0 0 0 0 1.5h8a.75.75 0 0 0 0-1.5H5ZM5 8.25a.75.75 0 0 0 0 1.5h4a.75.75 0 1 0 0-1.5H5Z"
+            fill="currentColor"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M3 .25A2.75 2.75 0 0 0 .25 3v14a.75.75 0 0 0 1.2.6L4.916 15c.217-.162.48-.25.75-.25H15A2.75 2.75 0 0 0 17.75 12V3A2.75 2.75 0 0 0 15 .25H3ZM1.75 3c0-.69.56-1.25 1.25-1.25h12c.69 0 1.25.56 1.25 1.25v9c0 .69-.56 1.25-1.25 1.25H5.666a2.75 2.75 0 0 0-1.65.55L1.75 15.5V3Z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          />
+        </svg>
       </div>
     </div>
   </form>

src/components/Alert/Alert.test.tsx

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { vi, describe, it, expect } from "vitest";
 import {
   fireEvent,
   getByLabelText,
@@ -45,7 +46,7 @@ describe("Alert", () => {
   });
 
   it("can have a close button", async () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     const { container } = render(
       <Alert title="Title" type="critical" onClose={spy}>
         Click me!

src/components/Alert/__snapshots__/Alert.test.tsx.snap

@@ -1,27 +1,35 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Alert renders 1`] = `
+exports[`Alert > renders 1`] = `
 <DocumentFragment>
   <div
-    class="alert"
+    class="_alert_6cfd7b"
     data-type="success"
   >
     <svg
       aria-hidden="true"
-      class="icon"
+      class="_icon_6cfd7b"
+      fill="currentColor"
       height="24"
+      viewBox="0 0 24 24"
       width="24"
-    />
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="m10.6 13.8-2.15-2.15a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7L9.9 15.9c.2.2.433.3.7.3.267 0 .5-.1.7-.3l5.65-5.65a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275L10.6 13.8ZM12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+        fill="currentColor"
+      />
+    </svg>
     <div
-      class="content"
+      class="_content_6cfd7b"
     >
       <p
-        class="title"
+        class="_title_6cfd7b"
       >
         Title
       </p>
       <p
-        class="caption"
+        class="_caption_6cfd7b"
       >
         Success!
       </p>

src/components/Avatar/Avatar.test.tsx

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { describe, beforeEach, expect, it } from "vitest";
 import { render, waitFor } from "@testing-library/react";
 import React from "react";
 

src/components/Avatar/AvatarStack.test.tsx

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
 import { render } from "@testing-library/react";
 import React from "react";
 

src/components/Avatar/__snapshots__/Avatar.test.tsx.snap

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Avatar renders the image-less avatar 1`] = `
+exports[`Avatar > renders the image-less avatar 1`] = `
 <DocumentFragment>
   <span
     aria-label=""
-    class="avatar"
+    class="_avatar_de1988"
     data-color="8"
     data-type="round"
     role="img"

src/components/Avatar/__snapshots__/AvatarStack.test.tsx.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`AvatarStack renders 1`] = `
+exports[`AvatarStack > renders 1`] = `
 <DocumentFragment>
   <div
-    class="stacked-avatars"
+    class="_stacked-avatars_de1988"
   />
 </DocumentFragment>
 `;

src/components/Badge/Badge.test.tsx

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { describe, it, expect } from "vitest";
 import { render } from "@testing-library/react";
 import React from "react";
 

src/components/Badge/__snapshots__/Badge.test.tsx.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Badge renders 1`] = `
+exports[`Badge > renders 1`] = `
 <DocumentFragment>
   <span
-    class="badge"
+    class="_badge_f1986f"
     data-kind="default"
     style="font: var(--cpd-font-body-sm-medium); letter-spacing: var(--cpd-font-letter-spacing-body-sm);"
   />

src/components/Button/Button.test.tsx

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { vi, describe, it } from "vitest";
 import React from "react";
 import { getByRole, render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
@@ -27,7 +28,7 @@ describe("Button", () => {
   });
 
   it("can be clicked", async () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     const { container } = render(<Button onClick={spy}>Click me!</Button>);
 
     const user = userEvent.setup();

src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Button renders 1`] = `
+exports[`Button > renders 1`] = `
 <DocumentFragment>
   <button
-    class="button"
+    class="_button_2a1efe"
     data-kind="primary"
     data-size="lg"
     role="button"

src/components/Checkbox/Checkbox.test.tsx

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { describe, it, expect } from "vitest";
 import { getByRole, render } from "@testing-library/react";
 import React from "react";
 

src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap

@@ -1,21 +1,31 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Checkbox renders 1`] = `
+exports[`Checkbox > renders 1`] = `
 <DocumentFragment>
   <div
-    class="checkbox"
+    class="_checkbox_399c3c"
     data-kind="primary"
   >
     <input
       type="checkbox"
     />
     <div
-      class="checkbox-ui"
+      class="_checkbox-ui_399c3c"
     >
       <svg
         aria-hidden="true"
-        class="checkbox-check"
-      />
+        class="_checkbox-check_399c3c"
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.878.878 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.713-.275.291 0 .529.092.712.275.183.183.275.42.275.713 0 .291-.092.529-.275.712l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+          fill="currentColor"
+        />
+      </svg>
     </div>
   </div>
 </DocumentFragment>

src/components/Form/Controls/MFA/MFA.test.tsx

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { describe, it, expect } from "vitest";
 import React from "react";
 import { act, render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";

src/components/Form/Controls/MFA/__snapshots__/MFA.test.tsx.snap

@@ -1,25 +1,25 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`PasswordControl renders 1`] = `
+exports[`PasswordControl > renders 1`] = `
 <DocumentFragment>
   <form
-    class="root"
+    class="_root_dc87d2"
   >
     <div
-      class="field"
+      class="_field_dc87d2"
     >
       <label
-        class="label"
+        class="_label_dc87d2"
         for="radix-:r0:"
       >
         MFA
       </label>
       <div
-        class="mfa control"
+        class="_mfa_4b8c2b _control_dc87d2"
       >
         <input
           autocomplete="off"
-          class="mfa-input"
+          class="_mfa-input_4b8c2b"
           id="radix-:r0:"
           maxlength="6"
           minlength="0"
@@ -31,27 +31,27 @@ exports[`PasswordControl renders 1`] = `
         />
         <div
           aria-hidden="true"
-          class="digit control"
+          class="_digit_4b8c2b _control_dc87d2"
         />
         <div
           aria-hidden="true"
-          class="digit control"
+          class="_digit_4b8c2b _control_dc87d2"
         />
         <div
           aria-hidden="true"
-          class="digit control"
+          class="_digit_4b8c2b _control_dc87d2"
         />
         <div
           aria-hidden="true"
-          class="digit control"
+          class="_digit_4b8c2b _control_dc87d2"
         />
         <div
           aria-hidden="true"
-          class="digit control"
+          class="_digit_4b8c2b _control_dc87d2"
         />
         <div
           aria-hidden="true"
-          class="digit control"
+          class="_digit_4b8c2b _control_dc87d2"
         />
       </div>
     </div>

src/components/Form/Controls/Password/Password.test.tsx

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { describe, it, expect } from "vitest";
 import React from "react";
 import { act, getByLabelText, render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";