Replace jest with vitest

Gemfile

@@ -118,4 +118,4 @@ gem "net-pop", require: false
 gem "net-smtp", require: false
 gem "strscan", "3.0.1"
 
-gem "vite_rails", "~> 3.0"
+gem "vite_rails"

Gemfile.lock

@@ -176,7 +176,7 @@ GEM
       coffee-script-source
       execjs
     coffee-script-source (1.12.2)
-    concurrent-ruby (1.2.2)
+    concurrent-ruby (1.2.3)
     connection_pool (2.4.1)
     crack (0.4.5)
       rexml
@@ -254,7 +254,7 @@ GEM
       mini_mime (>= 1.0.0)
       multi_xml (>= 0.5.2)
     httpclient (2.8.3)
-    i18n (1.14.1)
+    i18n (1.14.4)
       concurrent-ruby (~> 1.0)
     ice_nine (0.11.2)
     io-console (0.6.0)
@@ -294,7 +294,7 @@ GEM
     llhttp-ffi (0.4.0)
       ffi-compiler (~> 1.0)
       rake (~> 13.0)
-    loofah (2.21.4)
+    loofah (2.22.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
     mail (2.8.1)
@@ -313,7 +313,7 @@ GEM
     method_source (1.0.0)
     mini_mime (1.1.5)
     mini_portile2 (2.8.5)
-    minitest (5.20.0)
+    minitest (5.22.3)
     msgpack (1.5.6)
     multi_json (1.15.0)
     multi_xml (0.6.0)
@@ -335,7 +335,7 @@ GEM
       timeout
     net-ssh (7.0.1)
     nio4r (2.5.9)
-    nokogiri (1.15.4)
+    nokogiri (1.16.3)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
     omniauth (1.9.2)
@@ -365,9 +365,9 @@ GEM
     public_suffix (5.0.3)
     puma (5.6.7)
       nio4r (~> 2.0)
-    racc (1.7.2)
-    rack (2.2.8)
-    rack-proxy (0.7.4)
+    racc (1.7.3)
+    rack (2.2.9)
+    rack-proxy (0.7.7)
       rack
     rack-test (2.1.0)
       rack (>= 1.3)
@@ -404,7 +404,7 @@ GEM
       rake (>= 12.2)
       thor (~> 1.0)
     rainbow (3.1.1)
-    rake (13.1.0)
+    rake (13.2.1)
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
@@ -547,7 +547,7 @@ GEM
     strscan (3.0.1)
     terser (1.1.12)
       execjs (>= 0.3.0, < 3)
-    thor (1.3.0)
+    thor (1.3.1)
     thread_safe (0.3.6)
     tilt (2.0.11)
     timecop (0.9.5)
@@ -589,7 +589,7 @@ GEM
     vite_rails (3.0.17)
       railties (>= 5.1, < 8)
       vite_ruby (~> 3.0, >= 3.2.2)
-    vite_ruby (3.3.4)
+    vite_ruby (3.5.0)
       dry-cli (>= 0.7, < 2)
       rack-proxy (~> 0.6, >= 0.6.1)
       zeitwerk (~> 2.2)
@@ -624,7 +624,7 @@ GEM
     yard (0.9.28)
       webrick (~> 1.7.0)
     yell (2.2.2)
-    zeitwerk (2.6.12)
+    zeitwerk (2.6.13)
 
 PLATFORMS
   ruby
@@ -696,7 +696,7 @@ DEPENDENCIES
   timecop
   twitter-typeahead-rails (= 0.11.1.pre.corejavascript)
   tzinfo-data
-  vite_rails (~> 3.0)
+  vite_rails
   web-console (>= 3.3.0)
   webdrivers
   webmock

spec/javascript/pulfalight/addToCartButton.spec.js → app/javascript/test/addToCartButton.spec.js

@@ -1,9 +1,9 @@
 import { render, fireEvent } from '@testing-library/vue'
-import AddToCartButton from "components/AddToCartButton"
+import AddToCartButton from "@/components/AddToCartButton.vue"
 
 describe("AddToCartButton.vue", () => {
   test("Adding to cart", async () => {
-    const addItemToCart = jest.fn()
+    const addItemToCart = vi.fn()
     const store = {
       actions: {
         "addItemToCart": addItemToCart

spec/javascript/pulfalight/cartViewToggle.spec.js → app/javascript/test/cartViewToggle.spec.js

@@ -1,9 +1,9 @@
-import CartViewToggle from "components/CartViewToggle"
+import CartViewToggle from "@/components/CartViewToggle.vue"
 import { render, fireEvent } from '@testing-library/vue'
 
 describe("CartViewToggle.vue", () => {
   test("Toggling cart", async () => {
-    const toggleVisibility = jest.fn()
+    const toggleVisibility = vi.fn()
     const store = {
       state: {
         cart: {
@@ -19,7 +19,7 @@ describe("CartViewToggle.vue", () => {
     await fireEvent.click(button)
     expect(toggleVisibility).toHaveBeenCalled()
 
-    count = container.getElementsByClassName("badge")[0]
+    let count = container.getElementsByClassName("badge")[0]
     expect(count.textContent.trim()).toBe("1")
   })
 })

spec/javascript/pulfalight/components/FiggyViewer.spec.js → app/javascript/test/components/FiggyViewer.spec.js

@@ -1,10 +1,10 @@
-import FiggyViewer from "components/FiggyViewer"
+import FiggyViewer from "@/components/FiggyViewer.vue"
 import { mount } from '@vue/test-utils'
 import flushPromises from 'flush-promises'
 
 describe("FiggyViewer.vue", () => {
   function stubQuery(embedHash) {
-    global.fetch = jest.fn(() =>
+    global.fetch = vi.fn(() =>
       Promise.resolve({
         status: 200,
         json: () => Promise.resolve(

spec/javascript/pulfalight/requestCart.spec.js → app/javascript/test/requestCart.spec.js

@@ -1,5 +1,5 @@
-import RequestCart from "components/RequestCart"
-import { cartMutations, cartActions } from "store/cart/index"
+import RequestCart from "@/components/RequestCart.vue"
+import { cartMutations, cartActions } from "@/store/cart/index.es6"
 import { render, fireEvent } from '@testing-library/vue'
 
 describe("RequestCart.vue", () => {
@@ -119,12 +119,11 @@ describe("RequestCart.vue", () => {
     noteInput.value = "Test Note"
 
     const shadowForm = container.querySelector("form#shadow-form")
-    const submitMock = jest.fn()
-    shadowForm.addEventListener("submit", (event) => {
-      // can't actually submit a form in a test
-      event.preventDefault()
-      submitMock()
-    })
+    let submittedForm = null
+    const submitMock = function() {
+      submittedForm = this
+    }
+    window.HTMLFormElement.prototype.submit = submitMock
 
     await fireEvent.submit(form)
 
@@ -135,7 +134,7 @@ describe("RequestCart.vue", () => {
     expect(shadowForm.querySelector("input[name='Notes']")).not.toBe(null)
 
     // shadow form was submitted
-    expect(submitMock).toHaveBeenCalled()
+    expect(submittedForm.id).toBe('shadow-form')
 
     // cart is empty
     const button = container.querySelector("button[type='submit']")

package.json

@@ -2,18 +2,7 @@
   "name": "pulfalight",
   "private": true,
   "dependencies": {
-    "@babel/core": "^7.6.4",
-    "@babel/plugin-external-helpers": "^7.10.4",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/plugin-transform-modules-umd": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.6.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/runtime": "^7.13.9",
     "@vitejs/plugin-vue2": "^2.2.0",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-plugin-dynamic-import-node": "^2.3.3",
-    "babel-plugin-macros": "^3.1.0",
     "core-js": "3",
     "jquery": "^3.5.1",
     "lux-design-system": "4.5.2",
@@ -29,45 +18,13 @@
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/vue": "^5.2.0",
     "flush-promises": "^1.0.2",
-    "jest": "^26.4.2",
-    "vite": "^4.5.0",
-    "vite-plugin-ruby": "^3.2.2",
-    "vue-jest": "^3.0.7"
+    "jsdom": "^24.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-ruby": "^5.0.0",
+    "vitest": "^1.4.0"
   },
   "scripts": {
-    "test": "jest",
-    "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
+    "test": "vitest run",
     "build": "vite build"
-  },
-  "jest": {
-    "verbose": true,
-    "testURL": "http://localhost/",
-    "roots": [
-      "spec/javascript"
-    ],
-    "setupFiles": [
-      "./spec/javascript/setup.js"
-    ],
-    "transform": {
-      "^.+\\.js$": "babel-jest",
-      "^.+\\.es6$": "babel-jest",
-      "^.+\\.vue$": "vue-jest"
-    },
-    "moduleFileExtensions": [
-      "js",
-      "es6",
-      "vue",
-      "css"
-    ],
-    "moduleDirectories": [
-      "node_modules",
-      "app/javascript"
-    ],
-    "modulePaths": [
-      "<rootDir>/app/javascript"
-    ],
-    "transformIgnorePatterns": [
-      "<rootDir>/node_modules/(?!vue)"
-    ]
   }
 }

vite.config.ts

@@ -7,4 +7,12 @@ export default defineConfig({
     RubyPlugin(),
     vue(),
   ],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./test/setup.js'],
+    alias: {
+      '@/': './app/javascript'
+    }
+  },
 })