Replace Jest with Vitest

Author: tchin25

README.md

@@ -18,14 +18,16 @@ Inspired by [this video](https://www.youtube.com/watch?v=kYl271X2LNA).
 
 ## Development
 
+> Requires Node >=v14
+
 1. Clone this template
 2. Install dependencies with `yarn`
-3. `yarn build:watch` to build into `dist`, launch a chromium window with the extension installed, and rebuild on file changes
+3. `yarn dev` to build into `dist`, launch a chromium window with the extension installed, and rebuild on file changes
 4. `yarn test` to run unit tests
 
 ## Building
 
-1. `yarn build:prod` to build into `dist`
+1. `yarn build` to build into `dist`
 2. Enable dev mode in `chrome://extensions/` and upload your extension
     - If you want to develop for Firefox, you need the [web-ext cli](https://extensionworkshop.com/documentation/develop/web-ext-command-reference/)
     - Also take a look at the [dynamic browser options](https://vite-plugin-web-extension.aklinker1.io/guide/configuration.html#browser-specific-manifest-fields) in `vite-plugin-web-extension` if you don't want to use `webextension-polyfill`

package.json

@@ -3,57 +3,25 @@
   "version": "0.0.1",
   "description": "",
   "scripts": {
-    "build:watch": "cross-env SOURCEMAP=true vite build --watch",
-    "build:prod": "vite build",
-    "test": "jest"
+    "dev": "cross-env SOURCEMAP=true vite build --watch",
+    "build": "vite build",
+    "test": "vitest"
   },
   "author": "Thomas Chin",
   "license": "ISC",
   "devDependencies": {
-    "@types/jest": "^29.1.1",
     "@types/webextension-polyfill": "^0.9.1",
     "@vitejs/plugin-vue": "^3.1.0",
     "@vue/test-utils": "^2.1.0",
-    "@vue/vue3-jest": "28",
     "cross-env": "^7.0.3",
-    "jest": "^29.1.2",
-    "jest-environment-jsdom": "^29.1.2",
+    "jsdom": "^20.0.1",
     "postcss": "8.4.17",
     "sass": "^1.55.0",
-    "ts-jest": "^29.0.3",
     "typescript": "^4.8.4",
     "vite": "^3.1.4",
     "vite-plugin-web-extension": "^1.4.4",
+    "vitest": "^0.23.4",
     "vue": "^3.2.40",
     "webextension-polyfill": "^0.10.0"
-  },
-  "jest": {
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "vue",
-      "js",
-      "jsx",
-      "json",
-      "node"
-    ],
-    "moduleNameMapper": {
-      "^@/(.*)$": "<rootDir>/src/$1"
-    },
-    "testEnvironment": "jsdom",
-    "testEnvironmentOptions": {
-      "customExportConditions": [
-        "node",
-        "node-addons"
-      ]
-    },
-    "transform": {
-      "^.+\\.vue$": "@vue/vue3-jest",
-      "^.+\\.tsx?$": "ts-jest"
-    },
-    "transformIgnorePatterns": [
-      "/node_modules/"
-    ],
-    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$"
   }
 }

src/tests/example.spec.ts

@@ -1,9 +1,26 @@
 import { shallowMount } from "@vue/test-utils";
-import OptionsScreen from "@/options/OptionsScreen.vue";
+import OptionsScreen from "../options/OptionsScreen.vue";
+import browser from "webextension-polyfill";
+import { afterAll, beforeAll, describe, expect, test, vi } from "vitest";
 
 describe("OptionsScreen.vue", () => {
+  beforeAll(() => {
+    vi.mock("webextension-polyfill", () => ({
+      default: {
+        runtime: {
+          sendMessage: vi.fn(),
+        },
+      },
+    }));
+  });
+
   test("renders options page when passed", () => {
     const wrapper = shallowMount(OptionsScreen, {});
     expect(wrapper.text()).toMatch("Options Page");
+    expect(browser.runtime.sendMessage).toBeCalled();
+  });
+
+  afterAll(() => {
+    vi.clearAllMocks();
   });
 });

src/shims-vue.d.ts src/vite-env.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="vite/client" />
+
 // https://vuejs.github.io/vetur/guide/setup.html#typescript
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'

tsconfig.node.json

@@ -5,5 +5,5 @@
     "moduleResolution": "Node",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "vitest/globals"]
 }

vitest.config.ts

@@ -0,0 +1,12 @@
+/// <reference types="vitest" />
+
+import { defineConfig } from "vite";
+import Vue from "@vitejs/plugin-vue";
+
+export default defineConfig({
+  plugins: [Vue()],
+  test: {
+    globals: true,
+    environment: "jsdom",
+  },
+});