feat: use vitest for testing

jaredpalmer · Apr 20, 2023 · bd01cd8 · bd01cd8
1 parent 5f3b0b3
commit bd01cd8
Show file tree

Hide file tree

Showing 7 changed files with 2,817 additions and 4,695 deletions.
diff --git a/packages/after.js/package.json b/packages/after.js/package.json
@@ -17,11 +17,11 @@
   "scripts": {
     "build": "tsup src/index.tsx --format cjs,esm --dts --legacy-output --clean",
     "dev": "npm run build -- --watch",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
-    "prepare": "tsdx build",
-    "size": "size-limit",
-    "analyze": "size-limit --why"
+    "clean": "rm -rf dist",
+    "lint": "yarn typecheck && eslint src --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "peerDependencies": {
     "express": ">=4",
@@ -33,22 +33,25 @@
   },
   "devDependencies": {
     "@size-limit/preset-small-lib": "^6.0.4",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
     "@types/express": "^4.17.3",
-    "@types/jest": "^25.2.1",
     "@types/node": "^13.13.2",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.6",
     "@types/react-helmet": "^5.0.15",
     "@types/react-router-dom": "^5.1.4",
     "@types/serialize-javascript": "^1.5.0",
-    "@typescript-eslint/eslint-plugin": "^2.29.0",
-    "@typescript-eslint/parser": "^2.29.0",
-    "babel-jest": "^24.9.0",
-    "eslint": "^6.8.0",
-    "eslint-plugin-react": "^7.19.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.38.0",
+    "eslint-plugin-jest-dom": "^4.0.3",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-testing-library": "^5.10.3",
     "express": "^4.17.1",
+    "happy-dom": "^9.8.4",
     "husky": "^7.0.4",
-    "jest": "^25.4.0",
     "razzle-dev-utils": "^3.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -58,6 +61,7 @@
     "size-limit": "^6.0.4",
     "tsup": "^6.7.0",
     "typescript": "^4.4.4",
+    "vitest": "^0.30.1"
   },
   "dependencies": {
     "babel-plugin-after": "^3.2.0"
@@ -76,12 +80,5 @@
       "path": "dist/esm/*.esm.js",
       "limit": "20 KB"
     }
-  ],
-  "jest": {
-    "globals": {
-      "ts-jest": {
-        "diagnostics": false
-      }
-    }
-  }
+  ]
 }
diff --git a/packages/after.js/test/errorPage.test.tsx b/packages/after.js/test/errorPage.test.tsx
@@ -1,3 +1,5 @@
+import { vi } from 'vitest';
+
 import { render as renderPage } from '../src';
 import { Helmet } from 'react-helmet';
 
@@ -21,8 +23,8 @@ describe('ErrorPage', () => {
 
   beforeEach(() => {
     res = {
-      status: jest.fn(),
-      redirect: jest.fn(),
+      status: vi.fn(),
+      redirect: vi.fn(),
     };
   });
   it('should set statusCode to 200', async () => {

diff --git a/packages/after.js/test/getAssets.test.tsx b/packages/after.js/test/getAssets.test.tsx
@@ -1,3 +1,5 @@
+import { vi } from 'vitest';
+
 import {
   getAssets as getRouteChunks,
   errorMeesage,
@@ -26,7 +28,7 @@ function getAssets(url, route = getRoute(url)) {
   return getRouteChunks({ route, chunks });
 }
 
-jest.mock('razzle-dev-utils/logger');
+vi.mock('razzle-dev-utils/logger');
 
 describe('getAssets', () => {
   test('for non-dynamic-import route should return empty array', () => {
@@ -45,7 +47,7 @@ describe('getAssets', () => {
   });
 
   test('should log and then throw error when chunkName is undefined and component is async', () => {
-    const errorLoger = jest.fn();
+    const errorLoger = vi.fn();
     logger.error.mockImplementation(errorLoger);
 
     const requestUrl = '/bad-route-config';

diff --git a/packages/after.js/test/setup-test-env.ts b/packages/after.js/test/setup-test-env.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
diff --git a/packages/after.js/vitest.config.ts b/packages/after.js/vitest.config.ts
@@ -0,0 +1,16 @@
+/// <reference types="vitest" />
+/// <reference types="vite/client" />
+
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: ['./test/setup-test-env.ts'],
+    include: ['./test/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    watchExclude: ['.*\\/node_modules\\/.*', '.*\\/dist\\/.*'],
+  },
+});
diff --git a/turbo.json b/turbo.json
@@ -4,6 +4,9 @@
     "build": {
       "outputs": ["lib/**", "dist/**", "build/**"]
     },
-    "lint": {}
+    "lint": {},
+    "test:watch": {
+      "cache": false
+    }
   }
 }