test: Get rid of jest

Author: unlight

.gitignore

@@ -5,3 +5,4 @@ dist-ssr
 *.local
 .env
 ~*
+/coverage/

README.md

@@ -46,7 +46,6 @@ npm run dev
 
 ## Todo
 
-- get rid of jest use vitest
 - get rid of class-validator (use zod)
 - switch to react location
 - https://realworld-docs.netlify.app/docs/specs/backend-specs/endpoints

jest.config.js

@@ -10,76 +10,73 @@
     "tscheck": "tsc --noEmit",
     "tscheck:w": "npm run tscheck -- --watch --preserveWatchOutput",
     "test": "npm run eslint && npm run tscheck && npm run test:cov",
-    "test:r": "node node_modules/jest/bin/jest --runInBand --verbose",
-    "test:w": "npm run test:r -- --watch",
-    "test:cov": "npm run test:r -- --collectCoverage",
+    "test:r": "vitest run src",
+    "test:w": "vitest watch src",
+    "test:cov": "vitest run src --coverage",
     "eslint": "node node_modules/eslint/bin/eslint \"src/**/*.{ts,tsx}\"",
     "eslint:w": "watchexec -w src \"npm run eslint\"",
     "eslint:fix": "npm run eslint -- --fix"
   },
   "dependencies": {
-    "@hookform/resolvers": "^2.9.7",
-    "ahooks": "^3.7.0",
+    "@hookform/resolvers": "^2.9.8",
+    "ahooks": "^3.7.1",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.13.2",
     "clsx": "^1.2.1",
     "jwt-decode": "^3.1.2",
-    "ky": "^0.31.1",
+    "ky": "^0.31.3",
     "njct": "^10.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-hook-form": "^7.34.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.35.0",
     "react-router-dom": "^6.3.0",
     "recoil": "^0.7.5",
     "rsts": "^1.0.0"
   },
   "devDependencies": {
     "@kyleshevlin/eslint-plugin": "^1.3.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.3.0",
-    "@types/jest": "^28.1.8",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
+    "@testing-library/react": "^13.4.0",
+    "@types/react": "^18.0.19",
+    "@types/react-dom": "^18.0.6",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.35.1",
-    "@typescript-eslint/parser": "^5.35.1",
+    "@typescript-eslint/eslint-plugin": "^5.37.0",
+    "@typescript-eslint/parser": "^5.37.0",
     "@vitejs/plugin-react-refresh": "^1.3.6",
-    "autoprefixer": "^10.4.8",
+    "@vitest/coverage-c8": "^0.23.2",
+    "autoprefixer": "^10.4.10",
     "cssnano": "^5.1.13",
     "cssnano-preset-default": "^5.2.12",
-    "eslint": "^8.23.0",
+    "eslint": "^8.23.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-node": "^0.3.6",
-    "eslint-import-resolver-typescript": "^3.5.0",
-    "eslint-plugin-boundaries": "^2.10.1",
+    "eslint-import-resolver-typescript": "^3.5.1",
+    "eslint-plugin-boundaries": "^3.0.0",
     "eslint-plugin-etc": "^2.0.2",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-only-warn": "^1.0.3",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-promise": "^6.0.1",
-    "eslint-plugin-react": "^7.31.1",
+    "eslint-plugin-react": "^7.31.8",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-regexp": "^1.9.0",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
+    "eslint-plugin-simple-import-sort": "^8.0.0",
     "eslint-plugin-sonarjs": "^0.15.0",
-    "eslint-plugin-sort-class-members": "^1.14.1",
-    "eslint-plugin-testing-library": "^5.6.0",
+    "eslint-plugin-sort-class-members": "^1.15.2",
+    "eslint-plugin-testing-library": "^5.6.4",
     "eslint-plugin-unicorn": "^43.0.2",
     "eslint-plugin-wix-editor": "^3.3.0",
+    "happy-dom": "^6.0.4",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.0.1",
-    "jest-mock-extended": "^2.0.7",
-    "jest-transform-stub": "^2.0.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.16",
     "prettier": "^2.7.1",
     "simplytyped": "^3.3.0",
     "tailwindcss": "^3.1.8",
-    "ts-jest": "^28.0.8",
-    "tsconfig-paths-jest-mapper": "^1.4.0",
-    "typescript": "^4.8.2",
-    "vite": "^3.0.9",
+    "typescript": "^4.8.3",
+    "vite": "^3.1.0",
     "vite-tsconfig-paths": "^3.5.0",
+    "vitest": "^0.23.2",
+    "vitest-mock-extended": "^0.1.15",
     "watchexec-bin": "^1.0.0"
   }
 }

jest.setup.ts

@@ -1,14 +1,15 @@
 import { SessionServiceInterface } from '@application';
 import { ArticleServiceInterface } from '@application/article';
 import { render, waitFor } from '@testing-library/react';
-import { mock } from 'jest-mock-extended';
 import { injector } from 'njct';
 import React from 'react';
 import { Ok } from 'rsts';
+import { afterAll, beforeEach, expect, it, vi } from 'vitest';
+import { mock } from 'vitest-mock-extended';
 
 import { App } from './App';
 
-jest.mock('./home/PopularTags', () => ({ PopularTags: () => 'populartags' }));
+vi.mock('./home/PopularTags', () => ({ PopularTags: () => 'populartags' }));
 
 let articleService = mock<ArticleServiceInterface>();
 let sessionService = mock<SessionServiceInterface>();

package.json

@@ -11,7 +11,7 @@ function useData(parameters: { slug: string }) {
   const [article, setArticle] = useState<SingleArticle | undefined>(undefined);
 
   const getArticle = useCallback(
-    async slug => {
+    async (slug: string) => {
       const article = await articleService.findOne(slug);
       setArticle(article);
     },

src/pages/App.spec.tsx

@@ -1,7 +1,7 @@
+import { TagService } from '@application/tag';
 import { useRequest } from 'ahooks';
 import { inject } from 'njct';
 import React from 'react';
-import { TagService } from '@application/tag';
 
 export function PopularTags(): JSX.Element {
   const { data: tagList, loading } = useRequest(async () => {

src/pages/article/Article/Article.tsx

@@ -1,14 +1,20 @@
+/// <reference types="vitest" />
 import { defineConfig, ConfigEnv, UserConfigExport } from 'vite';
 import reactRefresh from '@vitejs/plugin-react-refresh';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 // https://vitejs.dev/config/
 export default function ({}: ConfigEnv): UserConfigExport {
   return defineConfig({
+    test: {
+      threads: false,
+      reporters: 'dot',
+      environment: 'happy-dom',
+    },
     plugins: [tsconfigPaths(), reactRefresh()],
     build: {
       assetsDir: '.',
-      brotliSize: false,
+      // brotliSize: false,
     },
   });
 }