feat: vitest add

.eslintrc

@@ -0,0 +1,42 @@
+{
+  "root": true,
+  "env": { "browser": true, "es2020": true },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
+    "prettier",
+    "plugin:vitest/recommended"
+  ],
+  "ignorePatterns": ["dist", ".eslintrc.cjs", "**/*.html"],
+  "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
+  "settings": { "react": { "version": "18.2" } },
+  "plugins": ["react-refresh", "unused-imports", "vitest"],
+  "rules": {
+    "react-refresh/only-export-components": [
+      "warn",
+      { "allowConstantExport": true }
+    ],
+    "react/prop-types": "off",
+    "semi": ["error", "always"],
+    "no-console": "warn",
+    "no-unused-vars": "off",
+    "unused-imports/no-unused-imports": "error",
+    "unused-imports/no-unused-vars": [
+      "warn",
+      {
+        "vars": "all",
+        "varsIgnorePattern": "^_",
+        "args": "after-used",
+        "argsIgnorePattern": "^_"
+      }
+    ],
+    "vitest/max-nested-describe": [
+      "error",
+      {
+        "max": 3
+      }
+    ]
+  }
+}

.eslintrc.json

@@ -11,7 +11,7 @@
   "ignorePatterns": ["dist", ".eslintrc.cjs", "**/*.html"],
   "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
   "settings": { "react": { "version": "18.2" } },
-  "plugins": ["react-refresh", "unused-imports"],
+  "plugins": ["react-refresh", "unused-imports", "vitest"],
   "rules": {
     "react-refresh/only-export-components": [
       "warn",
@@ -30,6 +30,12 @@
         "args": "after-used",
         "argsIgnorePattern": "^_"
       }
+    ],
+    "vitest/max-nested-describe": [
+      "error",
+      {
+        "max": 3
+      }
     ]
   }
 }

package.json

@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "vite build",
     "format": "prettier -w .",
+    "test": "vitest",
     "format:check": "prettier -c .",
     "lint": "eslint src --fix --report-unused-disable-directives",
     "preview": "vite preview",
@@ -19,27 +20,34 @@
     ]
   },
   "dependencies": {
+    "eslint-plugin-vitest": "^0.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@iconify-icon/react": "^1.0.8",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.5.0",
     "@trivago/prettier-plugin-sort-imports": "^4.2.0",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.3",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.45.0",
+    "eslint": "^8.49.0",
     "eslint-config-prettier": "^8.9.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "eslint-plugin-unused-imports": "^3.0.0",
     "husky": "^8.0.0",
+    "jsdom": "^22.1.0",
     "lint-staged": "^13.2.3",
     "postcss": "^8.4.27",
     "prettier": "3.0.0",
     "tailwindcss": "^3.3.3",
-    "vite": "^4.4.5"
+    "vite": "^4.4.5",
+    "vitest": "^0.34.4"
   }
 }

src/__tests__/Error.test.jsx

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Error } from '../components';
+
+describe('Error', () => {
+  it('Renders error page', () => {
+    render(<Error />);
+    expect(true).toBeTruthy();
+  });
+});

src/__tests__/setup.js

@@ -0,0 +1,9 @@
+import * as matchers from '@testing-library/jest-dom/matchers';
+import { cleanup } from '@testing-library/react';
+import { afterEach, expect } from 'vitest';
+
+expect.extend(matchers);
+
+afterEach(() => {
+  cleanup();
+});

vite.config.js

@@ -4,4 +4,10 @@ import { defineConfig } from 'vite';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/__tests__/setup.js'],
+    testMatch: ['./src/__tests__/**/*.test.jsx'],
+    globals: true,
+  },
 });