test(vitest): change to vitest and add some snapshot tests

IgnacioPorte · Feb 6, 2024 · cc56c97 · cc56c97
1 parent 5fe992f
commit cc56c97
Show file tree

Hide file tree

Showing 15 changed files with 893 additions and 32 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/jest.config.ts b/jest.config.ts
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0 && prettier --write ./src",
-    "test": "jest",
+    "test": "vitest",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -16,25 +16,24 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
+    "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
-    "@types/jest": "^29.5.12",
     "axios": "^1.6.7",
     "axios-rate-limit": "^1.3.0",
     "chart.js": "^4.4.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.3.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^24.0.0",
     "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-day-picker": "^8.10.0",
     "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
-    "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2"
   },
   "devDependencies": {
@@ -51,6 +50,7 @@
     "postcss": "^8.4.33",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
-    "vite": "^5.0.8"
+    "vite": "^5.0.8",
+    "vitest": "^1.2.2"
   }
 }
diff --git a/src/components/ui/use-toast.ts b/src/components/ui/use-toast.ts
@@ -1,4 +1,3 @@
-// Inspired by react-hot-toast library
 import * as React from "react";
 
 import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
@@ -88,8 +87,6 @@ export const reducer = (state: State, action: Action): State => {
     case "DISMISS_TOAST": {
       const { toastId } = action;
 
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
       if (toastId) {
         addToRemoveQueue(toastId);
       } else {

diff --git a/src/test/__mocks__/fileMock.js b/src/test/__mocks__/fileMock.js
diff --git a/src/test/__tests__/__snapshots__/chart.test.tsx.snap b/src/test/__tests__/__snapshots__/chart.test.tsx.snap
@@ -0,0 +1,105 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`LinearChart Component Tests > renders chart with data 1`] = `
+<LinearChart
+  data={
+    [
+      {
+        "cryptoPortfolio": 0.1,
+        "date": "2021-01",
+        "fiatInvestment": 100,
+        "gain": 0,
+        "gainPercentage": 0,
+        "portfolioFiatValue": 150,
+        "price": 150,
+      },
+      {
+        "cryptoPortfolio": 0.2,
+        "date": "2021-02",
+        "fiatInvestment": 200,
+        "gain": 50,
+        "gainPercentage": 25,
+        "portfolioFiatValue": 250,
+        "price": 250,
+      },
+    ]
+  }
+/>
+`;
+
+exports[`LinearChart Component Tests > renders without crashing 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="md:w-2/3 w-full flex flex-col items-center"
+      >
+        <div
+          class="animate-pulse bg-primary/10 h-full w-full rounded-xl"
+        />
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="md:w-2/3 w-full flex flex-col items-center"
+    >
+      <div
+        class="animate-pulse bg-primary/10 h-full w-full rounded-xl"
+      />
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;