Merge pull request #370 from Laings-Online-Limited/switch-jest-to-vitest

Replace Jest with Vitest for JavaScript testing

README.md

@@ -57,23 +57,14 @@ The app tests are written with [rspec-rails] and you can run them with:
 bundle exec rspec
 ```
 
-There are also unit tests for JavaScript code (look for files named `*.test.js`), written with [Jest]. You can run those with:
+There are also unit tests for JavaScript code (look for files named `*.test.js`), written with [Vitest]. You can run those with:
 
 ```bash
 npm run test
-
-# For just the unit tests:
-npm run test:unit
-
-# to re-run the tests when files change:
-npm run test:unit --watch
-
-# For the functional tests:
-npm run test:functional
 ```
 
 [rspec-rails]: https://github.com/rspec/rspec-rails
-[Jest]: https://jest.io
+[Vitest]: https://vitest.dev/
 
 ### Linting
 

app/frontend/javascript/components/cookie_banner.test.mjs

@@ -1,3 +1,8 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { describe, beforeEach, test, expect } from 'vitest'
 import { CookieBanner } from './cookie_banner.mjs'
 
 describe('CookieBanner', () => {

app/frontend/javascript/components/cookie_page.test.mjs

@@ -1,3 +1,8 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { describe, beforeEach, test, expect } from 'vitest'
 import { CookiePage } from './cookie_page.mjs'
 
 describe('CookiePage', () => {
@@ -30,7 +35,7 @@ describe('CookiePage', () => {
     cookiePage = new CookiePage(document.querySelector('[data-module="app-cookies-page"]'))
   })
 
-  test('Initialzes ok when given valid html', () => {
+  test('Initializes ok when given valid html', () => {
     expect(cookiePage).toBeDefined()
   })
 })

app/frontend/javascript/services/cookie.test.mjs

@@ -1,4 +1,9 @@
+/**
+ * @vitest-environment jsdom
+ */
+
 import { loadConsentStatus, saveConsentStatus, COOKIE_NAME, CONSENT_STATUS } from './cookie.mjs'
+import { describe, beforeEach, afterEach, it, expect } from 'vitest'
 
 describe('Cookie', () => {
   const cookieValue = `${COOKIE_NAME}=true`

app/frontend/javascript/services/google_tag.test.mjs

@@ -1,4 +1,9 @@
+/**
+ * @vitest-environment jsdom
+ */
+
 import { deleteGoogleAnalyticsCookies, installAnalyticsScript } from './google_tag.mjs'
+import { describe, afterEach, it, expect } from 'vitest'
 
 describe('google_tag.mjs', () => {
   afterEach(() => {