chore(test): Remove jest, add vitest (#1723)

See linked issue. Notes: - Stuff that used to be in `/jest` is now in `/test-support` - I moved `@/services/testing.ts` to `/test-support/index.ts` - Our 'main' file now lives at `/test-support/main.ts` (it used to be `/jest/jest-setup.ts` + `/jest/jest-setup-after-environment.ts`) - I kinda guessed that we might not need dotenv anymore, seems like we don't. I'd rather our CLI tests don't use dotenv anyway. - I noticed that we still installed chart.js etc, so I removed those here from the package.json - I also removed quite a lot of jest related dependencies 🎉 --------- Signed-off-by: John Cowen <[email protected]>
kumahq · Nov 6, 2023 · 7a6774a · 7a6774a
1 parent ae17155
commit 7a6774a
Show file tree

Hide file tree

Showing 28 changed files with 426 additions and 1,611 deletions.
diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,5 @@ yarn-error.log*
 # Vitepress
 .vitepress/cache
 .vitepress/dist
+
+coverage/*
diff --git a/jest.config.js b/jest.config.js
diff --git a/jest/jest-setup.ts b/jest/jest-setup.ts
diff --git a/jest/yaml-transformer.js b/jest/yaml-transformer.js
diff --git a/package.json b/package.json
@@ -21,10 +21,13 @@
     "lint:lockfile": "lockfile-lint --path yarn.lock --allowed-hosts yarn --validate-https",
     "lint:ts": "vue-tsc --noEmit",
     "lint:styles": "stylelint --allow-empty-input './src/**/*.{css,scss,vue}'",
-    "test": "cross-env TZ=UTC VITE_ZONE_CREATION_FLOW=enabled jest",
+    "test": "cross-env TZ=UTC yarn run test:unit",
     "test:browser": "cross-env TZ=UTC cypress run --browser chrome",
     "test:browser:view": "cross-env TZ=UTC KUMA_BASE_URL=http://localhost:8080/gui cypress open --e2e --browser chrome",
-    "test:watch": "yarn run test --watch",
+    "test:unit": "cross-env FORCE_COLOR=1 vitest -c vite.config.production.ts run",
+    "test:unit:coverage": "cross-env FORCE_COLOR=1 vitest -c vite.config.production.ts run --coverage",
+    "test:watch": "vitest -c vite.config.production.ts --watch",
+
     "docs:dev": "vitepress dev",
     "docs:generate": "rm -rf docs/components && vue-docgen src/**/*.vue",
     "docs:build": "vitepress build",
@@ -39,13 +42,11 @@
     "@kong/icons": "1.7.8",
     "@kong/kongponents": "8.125.0",
     "brandi": "5.0.0",
-    "chart.js": "4.4.0",
     "deepmerge": "4.3.1",
     "js-yaml": "4.1.0",
     "prismjs": "1.29.0",
     "semver": "7.5.4",
     "vue": "3.3.7",
-    "vue-chartjs": "5.2.0",
     "vue-github-button": "3.1.0",
     "vue-router": "4.2.5"
   },
@@ -56,7 +57,6 @@
     "@badeball/cypress-cucumber-preprocessor": "18.0.6",
     "@bahmutov/cypress-esbuild-preprocessor": "2.2.0",
     "@faker-js/faker": "8.2.0",
-    "@jest/globals": "29.7.0",
     "@kong/design-tokens": "1.11.6",
     "@modyfi/vite-plugin-yaml": "1.0.4",
     "@types/glob": "8.1.0",
@@ -67,14 +67,12 @@
     "@typescript-eslint/eslint-plugin": "6.9.1",
     "@typescript-eslint/parser": "6.9.1",
     "@vitejs/plugin-vue": "4.4.0",
+    "@vitest/coverage-istanbul": "0.34.6",
     "@vue/eslint-config-typescript": "12.0.0",
     "@vue/test-utils": "2.4.1",
-    "@vue/vue3-jest": "29.2.6",
     "autoprefixer": "10.4.16",
-    "babel-jest": "29.7.0",
     "babel-plugin-transform-import-meta": "2.2.1",
     "babel-plugin-transform-vite-meta-env": "1.0.3",
-    "canvas": "2.11.2",
     "cross-env": "7.0.3",
     "cypress": "13.4.0",
     "cypress-fail-fast": "7.0.3",
@@ -90,11 +88,7 @@
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-vue": "9.17.0",
     "glob": "10.3.10",
-    "isomorphic-fetch": "3.0.0",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
-    "jest-serializer-vue": "3.1.0",
-    "jest-transform-stub": "2.0.0",
+    "jsdom": "22.1.0",
     "lockfile-lint": "4.12.1",
     "marked": "9.1.4",
     "msw": "1.3.2",
@@ -105,14 +99,14 @@
     "stylelint-config-html": "1.1.0",
     "stylelint-config-recommended-scss": "13.0.0",
     "stylelint-config-recommended-vue": "1.5.0",
-    "ts-jest": "29.1.1",
     "typescript": "5.2.2",
     "urlpattern-polyfill": "9.0.0",
     "vite": "4.5.0",
     "vite-plugin-html": "3.2.0",
     "vite-plugin-rewrite-all": "1.0.1",
     "vite-svg-loader": "4.0.0",
     "vitepress": "1.0.0-rc.24",
+    "vitest": "0.34.6",
     "vue-docgen-cli": "4.67.0",
     "vue-tsc": "1.8.22"
   },

diff --git a/src/app/application/components/data-source/DataSource.spec.ts b/src/app/application/components/data-source/DataSource.spec.ts
@@ -1,8 +1,8 @@
-import { describe, expect, test } from '@jest/globals'
 import { flushPromises, mount } from '@vue/test-utils'
+import { describe, expect, test } from 'vitest'
 
 import DataSource from './DataSource.vue'
-import { withSources } from '@/../jest/jest-setup-after-env'
+import { withSources } from '@/../test-support/main'
 
 describe('DataSourcePool', () => {
   test("passing an empty uri doesn't fire change", async () => {

diff --git a/src/app/application/services/data-source/Router.spec.ts b/src/app/application/services/data-source/Router.spec.ts
@@ -1,4 +1,4 @@
-import { describe, expect, test } from '@jest/globals'
+import { describe, expect, test } from 'vitest'
 
 import Router from './Router'
 

diff --git a/src/app/common/AccordionList.spec.ts b/src/app/common/AccordionList.spec.ts
@@ -1,5 +1,5 @@
-import { describe, expect, test } from '@jest/globals'
 import { mount } from '@vue/test-utils'
+import { describe, expect, test } from 'vitest'
 
 import AccordionItem from './AccordionItem.vue'
 import AccordionList from './AccordionList.vue'

diff --git a/src/app/common/ErrorBlock.spec.ts b/src/app/common/ErrorBlock.spec.ts
@@ -1,5 +1,5 @@
-import { describe, expect, test } from '@jest/globals'
 import { mount } from '@vue/test-utils'
+import { describe, expect, test } from 'vitest'
 
 import ErrorBlock from './ErrorBlock.vue'
 import { ApiError } from '@/services/kuma-api/ApiError'

diff --git a/src/app/common/filter-bar/FilterBar.spec.ts b/src/app/common/filter-bar/FilterBar.spec.ts
@@ -1,5 +1,5 @@
-import { describe, expect, test } from '@jest/globals'
 import { mount } from '@vue/test-utils'
+import { describe, expect, test } from 'vitest'
 
 import KFilterBar from './FilterBar.vue'
 

diff --git a/src/app/common/filter-bar/clamp.spec.ts b/src/app/common/filter-bar/clamp.spec.ts
@@ -1,4 +1,4 @@
-import { describe, test, expect } from '@jest/globals'
+import { describe, expect, test } from 'vitest'
 
 import { clamp } from './clamp'
 

diff --git a/src/app/common/filter-bar/tokenizeFieldFilterQuery.spec.ts b/src/app/common/filter-bar/tokenizeFieldFilterQuery.spec.ts
@@ -1,4 +1,4 @@
-import { describe, expect, test } from '@jest/globals'
+import { describe, expect, test } from 'vitest'
 
 import { tokenizeFieldFilterQuery } from './tokenizeFieldFilterQuery'
 

diff --git a/src/app/data-planes/components/PolicyTypeEntryList.spec.ts b/src/app/data-planes/components/PolicyTypeEntryList.spec.ts
@@ -1,5 +1,5 @@
-import { describe, expect, test } from '@jest/globals'
 import { flushPromises, mount } from '@vue/test-utils'
+import { describe, expect, test } from 'vitest'
 
 import PolicyTypeEntryList from './PolicyTypeEntryList.vue'
 import { createPolicyTypeEntries } from '@/test-data/createPolicyTypeEntries'

diff --git a/src/app/onboarding/components/OnboardingNavigation.spec.ts b/src/app/onboarding/components/OnboardingNavigation.spec.ts
@@ -1,5 +1,5 @@
-import { describe, expect, test } from '@jest/globals'
 import { mount } from '@vue/test-utils'
+import { describe, expect, test } from 'vitest'
 
 import OnboardingNavigation from './OnboardingNavigation.vue'
 function renderComponent(props = {}) {

diff --git a/src/services/env/env.spec.ts b/src/services/env/env.spec.ts
@@ -1,4 +1,4 @@
-import { describe, expect, test } from '@jest/globals'
+import { describe, expect, test } from 'vitest'
 
 import Env, { normalizeBaseUrl, semver } from './Env'
 

diff --git a/src/services/kuma-api/ApiError.spec.ts b/src/services/kuma-api/ApiError.spec.ts
@@ -1,4 +1,4 @@
-import { describe, expect, test } from '@jest/globals'
+import { describe, expect, test } from 'vitest'
 
 import { ApiError } from './ApiError'
 

diff --git a/src/services/kuma-api/RestClient.spec.ts b/src/services/kuma-api/RestClient.spec.ts
@@ -1,11 +1,11 @@
-import { beforeEach, describe, expect, jest, test } from '@jest/globals'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
 
 import * as MakeRequestModule from './makeRequest'
 import { RestClient } from './RestClient'
 
 describe('RestClient', () => {
   beforeEach(() => {
-    jest.restoreAllMocks()
+    vi.restoreAllMocks()
   })
 
   test.each([
@@ -66,7 +66,7 @@ describe('RestClient', () => {
       },
     ],
   ])('processes query parameters correctly', (params, expectedOptions) => {
-    jest.spyOn(MakeRequestModule, 'makeRequest').mockImplementation(() => Promise.resolve({
+    vi.spyOn(MakeRequestModule, 'makeRequest').mockImplementation(() => Promise.resolve({
       response: new Response(),
       data: null,
     }))
@@ -86,7 +86,7 @@ describe('RestClient', () => {
     ['http://example.org', '/', 'http://example.org/'],
     ['http://example.org', 'http://konghq.tech/path', 'http://konghq.tech/path'],
   ])('sends correct request URL', (baseUrlOrPath: string, requestPath: string, expectedRequestUrl: string) => {
-    jest.spyOn(MakeRequestModule, 'makeRequest').mockImplementation(() => Promise.resolve({
+    vi.spyOn(MakeRequestModule, 'makeRequest').mockImplementation(() => Promise.resolve({
       response: new Response(),
       data: null,
     }))

diff --git a/src/services/kuma-api/makeRequest.spec.ts b/src/services/kuma-api/makeRequest.spec.ts
@@ -1,11 +1,11 @@
-import { beforeEach, describe, expect, jest, test } from '@jest/globals'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
 
 import { ApiError } from './ApiError'
 import { makeRequest } from './makeRequest'
 
 describe('makeRequest', () => {
   beforeEach(() => {
-    jest.restoreAllMocks()
+    vi.restoreAllMocks()
   })
 
   test.each([
@@ -76,7 +76,7 @@ describe('makeRequest', () => {
       },
     ],
   ])('works for requests that succeed and return a success status', async (fetchMock, expectedData, expectedPartialResponse) => {
-    jest.spyOn(global, 'fetch').mockImplementation(fetchMock)
+    vi.spyOn(global, 'fetch').mockImplementation(fetchMock)
 
     const { data, response } = await makeRequest('/')
 
@@ -100,7 +100,7 @@ describe('makeRequest', () => {
       new Error('An unknown network error occurred.'),
     ],
   ])('works for requests that fail with a network error', async (fetchMock, expectedError) => {
-    jest.spyOn(global, 'fetch').mockImplementation(fetchMock)
+    vi.spyOn(global, 'fetch').mockImplementation(fetchMock)
 
     await expect(() => makeRequest('/')).rejects.toThrow(expectedError)
   })
@@ -219,7 +219,7 @@ describe('makeRequest', () => {
       }),
     ],
   ])('works for requests that succeed but return a failure statuses (%s)', async (title, fetchMock, expectedError) => {
-    jest.spyOn(global, 'fetch').mockImplementation(fetchMock)
+    vi.spyOn(global, 'fetch').mockImplementation(fetchMock)
 
     const call = () => makeRequest('/')
 
@@ -246,7 +246,7 @@ describe('makeRequest', () => {
       },
     ],
   ])('correctly sends JSON payloads', async (options, payload, expectedInitObject) => {
-    jest.spyOn(global, 'fetch').mockImplementation((_input: RequestInfo | URL, _init?: RequestInit) => Promise.resolve(new Response('OK')))
+    vi.spyOn(global, 'fetch').mockImplementation((_input: RequestInfo | URL, _init?: RequestInit) => Promise.resolve(new Response('OK')))
 
     await makeRequest('/', options, payload)
 

diff --git a/src/utilities/camelCaseToWords.spec.ts b/src/utilities/camelCaseToWords.spec.ts
@@ -1,4 +1,4 @@
-import { describe, test, expect } from '@jest/globals'
+import { describe, expect, test } from 'vitest'
 
 import { camelCaseToWords } from './camelCaseToWords'
 

diff --git a/src/utilities/dataplane.spec.ts b/src/utilities/dataplane.spec.ts
@@ -1,4 +1,4 @@
-import { describe, expect, test } from '@jest/globals'
+import { describe, expect, test } from 'vitest'
 
 import { getStatusAndReason, getItemStatusFromInsight } from './dataplane'
 import {

diff --git a/src/utilities/get.spec.ts b/src/utilities/get.spec.ts
@@ -1,4 +1,4 @@
-import { describe, test, expect } from '@jest/globals'
+import { describe, expect, test } from 'vitest'
 
 import { get } from './get'
 

diff --git a/src/utilities/getLabels.spec.ts b/src/utilities/getLabels.spec.ts
@@ -1,4 +1,4 @@
-import { describe, test, expect } from '@jest/globals'
+import { describe, expect, test } from 'vitest'
 
 import { getLabels } from './getLabels'
 

diff --git a/src/utilities/highlightElement.spec.ts b/src/utilities/highlightElement.spec.ts
@@ -1,4 +1,5 @@
-import { describe, expect, test } from '@jest/globals'
+// @vitest-environment jsdom
+import { describe, expect, test } from 'vitest'
 
 import { _highlightCode, highlightElement, AvailableLanguages } from './highlightElement'
 

diff --git a/src/services/testing.ts → test-support/index.ts b/src/services/testing.ts → test-support/index.ts
@@ -1,11 +1,11 @@
 import { config } from '@vue/test-utils'
 import { setupServer } from 'msw/node'
 
-import createDisabledLogger from './logger/DisabledLogger'
-import { Alias, ServiceConfigurator, token, createInjections } from './utils'
 import type { PluginDefinition, ComponentDefinition } from '@/app/vue'
 import CliEnv from '@/services/env/CliEnv'
+import createDisabledLogger from '@/services/logger/DisabledLogger'
 import Logger from '@/services/logger/Logger'
+import { Alias, ServiceConfigurator, token, createInjections } from '@/services/utils'
 import { mocker, fakeApi, FS } from '@/test-support'
 import type { Mocker } from '@/test-support'
 import type { Component } from 'vue'