update config

Author: codegino

package.json

@@ -9,22 +9,26 @@
   },
   "scripts": {
     "build": "tsc --noEmit && vite build",
-    "build:hmr": "rollup --config utils/reload/rollup.config.ts",
+    "build:firefox": "tsc --noEmit && cross-env __FIREFOX__=true vite build",
+    "build:watch": "cross-env __DEV__=true vite build -w --mode development",
+    "build:firefox:watch": "cross-env __DEV__=true __FIREFOX__=true vite build -w --mode development",
+    "build:hmr": "rollup --config utils/reload/rollup.config.mjs",
     "wss": "node utils/reload/initReloadServer.js",
-    "dev": "npm run build:hmr && (npm run wss & nodemon)",
-    "test": "jest"
+    "dev": "pnpm build:hmr && (run-p wss build:watch)",
+    "dev:firefox": "pnpm build:hmr && (run-p wss build:firefox:watch)",
+    "test": "vitest"
   },
   "type": "module",
   "dependencies": {
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "webextension-polyfill": "0.10.0"
   },
   "devDependencies": {
-    "@rollup/plugin-typescript": "8.5.0",
+    "@rollup/plugin-typescript": "11.1.5",
     "@testing-library/react": "14.1.2",
     "@types/chrome": "0.0.254",
-    "@types/jest": "29.5.11",
-    "@types/node": "18.11.18",
+    "@types/node": "20.8.10",
     "@types/react": "18.2.45",
     "@types/react-dom": "18.2.18",
     "@types/ws": "8.5.10",
@@ -33,22 +37,24 @@
     "@vitejs/plugin-react": "4.2.1",
     "autoprefixer": "10.4.16",
     "chokidar": "3.5.3",
+    "cross-env": "7.0.3",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.0.1",
     "eslint-plugin-react": "7.31.10",
     "fs-extra": "11.2.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.3.1",
-    "nodemon": "2.0.20",
+    "npm-run-all": "4.1.5",
     "postcss": "8.4.32",
     "prettier": "3.1.1",
-    "rollup": "2.79.1",
+    "rollup": "4.3.0",
     "tailwindcss": "3.3.6",
     "ts-jest": "29.1.1",
     "ts-loader": "9.5.1",
     "typescript": "5.3.3",
     "vite": "5.0.10",
+    "vitest": "0.34.6",
     "ws": "8.15.1"
   }
 }

pnpm-lock.yaml

@@ -1,4 +1,5 @@
 import reloadOnUpdate from "virtual:reload-on-update-in-background-script";
+import 'webextension-polyfill'
 
 reloadOnUpdate("pages/background");
 

src/pages/background/index.ts

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import App from "@pages/content/components/Demo/app";
+import { describe, test } from "vitest";
 
 describe("appTest", () => {
   test("render text", () => {

src/pages/content/components/Demo/app.test.tsx

@@ -0,0 +1,2 @@
+// Do what you need to set up your test
+console.log('setup test: vitest.setup.js');

test-utils/jest.setup.js

@@ -15,14 +15,16 @@
     "allowSyntheticDefaultImports": true,
     "lib": ["dom", "dom.iterable", "esnext"],
     "forceConsistentCasingInFileNames": true,
-    "typeRoots": ["./src/global.d.ts"],
+    "typeRoots": ["./src/global.d.ts", "node_modules/@types"],
     "paths": {
+      "@root/*": ["./*"],
       "@src/*": ["src/*"],
       "@assets/*": ["src/assets/*"],
       "@pages/*": ["src/pages/*"],
       "virtual:reload-on-update-in-background-script": ["./src/global.d.ts"],
       "virtual:reload-on-update-in-view": ["./src/global.d.ts"]
     }
   },
-  "include": ["src", "utils", "vite.config.ts", "node_modules/@types"]
-}
+  "include": ["src", "utils", "vite.config.ts", "node_modules/@types"],
+  // "exclude": ["./src/**/*.test.tsx"]
+}

test-utils/vitest.setup.js

@@ -0,0 +1,28 @@
+import typescript from '@rollup/plugin-typescript';
+
+const plugins = [typescript()];
+
+export default [
+  {
+    plugins,
+    input: 'utils/reload/initReloadServer.ts',
+    output: {
+      file: 'utils/reload/initReloadServer.js',
+    },
+    external: ['ws', 'chokidar', 'timers'],
+  },
+  {
+    plugins,
+    input: 'utils/reload/injections/script.ts',
+    output: {
+      file: 'utils/reload/injections/script.js',
+    },
+  },
+  {
+    plugins,
+    input: 'utils/reload/injections/view.ts',
+    output: {
+      file: 'utils/reload/injections/view.js',
+    },
+  },
+];

tsconfig.json

@@ -60,6 +60,12 @@ export default defineConfig({
       },
     },
   },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    include: ['**/*.test.ts', '**/*.test.tsx'],
+    setupFiles: './test-utils/vitest.setup.js',
+  }
 });
 
 function getLastElement<T>(array: ArrayLike<T>): T {