refactor: replace jest with vitest using a similar approach as vite (#…

…337)

* refactor: replace jest with vitest using a similar approach as vite

* ci: check if 2 workers are faster than one

* fix: update unit test

* fix: update ~utils types

* chore: increase connect url timeout

* chore: remove unused await

* chore: try 1 thread

* fix: preserve temp dir on ci, align env names to TEST_

* fix: vitest uses posix paths on windows

* ci: try 4 threads

* fix: return to 1 thread on ci

* ci: use windows-latest again and add node18

* chore: run build tests before serve tests because they are less likely to fail

* refactor: convert test apps to esm, rebuild kit-node app with latest kit, update execa and node-fetch, fix issue with fetch on node18

* fix: revert preprocess-with-vite to cjs hoping it finds stylus correctly again, fetch as util

* fix: force glob to version that includes fix for breaking windows change

* fix: stabilize local tests by limiting max threads, improve untilUpdated utility, remove useless code

* chore: clean up test

Co-authored-by: bluwy <bjornlu.dev@gmail.com>

.editorconfig

@@ -8,5 +8,5 @@ indent_size = 2
 charset = utf-8
 trim_trailing_whitespace = true
 
-[{**/package.json, **/README.md, docs/**/*.md}]
+[{package.json,README.md, docs/**/*.md}]
 indent_style = space

.eslintrc.js

@@ -145,23 +145,10 @@ module.exports = {
 				node: true,
 				browser: true
 			},
-			// Can't extend in overrides: https://github.com/eslint/eslint/issues/8813
-			// "extends": ["plugin:jest/recommended"]
-			plugins: ['jest'],
 			rules: {
-				'jest/no-disabled-tests': 'warn',
-				'jest/no-focused-tests': 'error',
-				'jest/no-identical-title': 'error',
-				'jest/prefer-to-have-length': 'warn',
-				'jest/valid-expect': 'error'
-			}
-		},
-		{
-			files: ['scripts/**'],
-			env: {
-				jest: true,
-				node: true,
-				browser: false
+				'node/no-extraneous-import': 'off',
+				'node/no-missing-import': 'off',
+				'node/no-unused-import': 'off'
 			}
 		},
 		{

.github/workflows/ci.yml

@@ -1,4 +1,4 @@
-# build and test on linux, windows, mac with node  14, 16, 17
+# build and test on linux, windows, mac with node  14, 16, 18
 name: CI
 
 on:
@@ -50,7 +50,7 @@ jobs:
         if: (${{ success() }} || ${{ failure() }})
         run: pnpm audit
 
-  # this is the test matrix, it runs with node16 on linux,windows,macos + node14,17 on linux
+  # this is the test matrix, it runs with node16 on linux,windows,macos + node14,18 on linux
   # it is skipped if the build step of the checks job wasn't successful (still runs if lint or audit fail)
   test:
     needs: checks
@@ -61,10 +61,12 @@ jobs:
       fail-fast: false
       matrix:
         node: [16]
-        os: [ubuntu-latest, macos-latest, windows-2019]
+        os: [ubuntu-latest, macos-latest, windows-latest]
         include:
           - node: 14
             os: ubuntu-latest
+          - node: 18
+            os: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
@@ -86,7 +88,7 @@ jobs:
       - name: build
         run: pnpm build:ci
       - name: run tests
-        run: pnpm test:ci
+        run: pnpm test
       - name: archive tests temp directory
         if: failure()
         shell: bash
@@ -97,17 +99,4 @@ jobs:
           name: test-failure-${{github.run_id}}-${{ matrix.os }}-${{ matrix.node }}
           path: |
             test-temp.tar
-            temp/serve/jest-results.json
-            temp/serve/junit.xml
-            temp/build/jest-results.json
-            temp/build/junit.xml
             pnpm-debug.log
-      - uses: actions/upload-artifact@v3
-        if: success()
-        with:
-          name: test-success-${{github.run_id}}-${{ matrix.os }}-${{ matrix.node }}
-          path: |
-            temp/serve/jest-results.json
-            temp/serve/junit.xml
-            temp/build/jest-results.json
-            temp/build/junit.xml

package.json

@@ -5,14 +5,10 @@
     "dev": "pnpm --dir packages/vite-plugin-svelte dev",
     "build:ci": "pnpm --dir packages/vite-plugin-svelte build:ci",
     "build": "pnpm --dir packages/vite-plugin-svelte build",
-    "test": "run-s test:serve test:build",
-    "test:serve": "jest",
-    "test:serve:debug": "cross-env DEBUG=pw:api VITE_DEBUG_SERVE=1 node --inspect-brk ./node_modules/jest/bin/jest --runInBand",
-    "test:build": "cross-env VITE_TEST_BUILD=1 jest",
-    "test:build:debug": "cross-env DEBUG=pw:api VITE_TEST_BUILD=1 VITE_PRESERVE_BUILD_ARTIFACTS=1 node --inspect-brk ./node_modules/jest/bin/jest --runInBand",
-    "test:ci": "run-s test:ci:serve test:ci:build",
-    "test:ci:serve": "cross-env VITE_PRESERVE_BUILD_ARTIFACTS=1 jest --verbose --no-cache --runInBand --force-exit --ci --json --outputFile=\"temp/serve/jest-results.json\"",
-    "test:ci:build": "cross-env VITE_TEST_BUILD=1 VITE_PRESERVE_BUILD_ARTIFACTS=1 jest --verbose --no-cache --runInBand --force-exit --ci --json --outputFile=\"temp/build/jest-results.json\"",
+		"test": "run-s -c test:unit test:build test:serve",
+		"test:unit": "vitest run",
+		"test:serve": "vitest run -c vitest.config.e2e.ts",
+		"test:build": "cross-env TEST_BUILD=1 vitest run -c vitest.config.e2e.ts",
     "lint": "eslint --ignore-path .gitignore '**/*.{js,ts,svelte,html,svx,md}'",
     "lint:fix": "pnpm lint --fix",
     "format": "prettier --ignore-path .gitignore '**/*.{css,scss,svelte,html,js,ts,svx,md}' --check",
@@ -25,7 +21,6 @@
     "@changesets/cli": "^2.22.0",
     "@svitejs/changesets-changelog-github-compact": "^0.1.1",
     "@types/fs-extra": "^9.0.13",
-    "@types/jest": "^27.5.0",
     "@types/node": "^17.0.21",
     "@types/semver": "^7.3.9",
     "@typescript-eslint/eslint-plugin": "^5.22.0",
@@ -35,36 +30,32 @@
     "eslint": "^8.15.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-html": "^6.2.0",
-    "eslint-plugin-jest": "^26.1.5",
     "eslint-plugin-markdown": "^2.2.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "execa": "^5.1.1",
+    "execa": "^6.1.0",
     "fs-extra": "^10.1.0",
     "husky": "^7.0.4",
-    "jest": "^27.5.1",
-    "jest-environment-node": "^27.5.1",
-    "jest-junit": "^13.2.0",
     "lint-staged": "^12.4.1",
-    "node-fetch": "^2.6.7",
+    "node-fetch": "^3.2.4",
     "npm-run-all": "^4.1.5",
     "playwright-core": "^1.21.1",
     "prettier": "^2.6.2",
     "prettier-plugin-svelte": "^2.7.0",
     "rimraf": "^3.0.2",
     "svelte": "^3.48.0",
-    "ts-jest": "^27.1.4",
     "typescript": "^4.6.4",
-    "vite": "^2.9.8"
+    "vite": "^2.9.8",
+    "vitest": "^0.12.6"
   },
   "lint-staged": {
     "*.{js,ts,svelte,html,md,svx}": "eslint --fix",
     "*.{css,scss,svelte,html,js,ts,svx,md}": [
       "prettier --write"
     ]
   },
-	"packageManager": "pnpm@7.1.0",
+  "packageManager": "pnpm@7.1.0",
   "engines": {
     "pnpm": "^7.1.0",
     "yarn": "forbidden, use pnpm",
@@ -73,7 +64,8 @@
   },
   "pnpm": {
     "overrides": {
-      "@sveltejs/vite-plugin-svelte": "workspace:*"
+      "@sveltejs/vite-plugin-svelte": "workspace:*",
+      "glob@^7": "^7.2.3"
     }
   }
 }

packages/e2e-tests/autoprefixer-browerslist/__tests__/autoprefixer-browerslist.spec.ts

@@ -1,4 +1,5 @@
-import { isBuild, findAssetFile } from '../../testUtils';
+import { expect, test } from 'vitest';
+import { isBuild, findAssetFile, page } from '~utils';
 
 test('should prefix position: sticky for code in source tree', async () => {
 	const stickyStyle = isBuild

packages/e2e-tests/autoprefixer-browerslist/package.json

@@ -18,5 +18,6 @@
     "svelte": "^3.48.0",
     "svelte-preprocess": "^4.10.6",
     "vite": "^2.9.8"
-  }
+  },
+  "type": "module"
 }

packages/e2e-tests/autoprefixer-browerslist/svelte.config.js

@@ -0,0 +1,12 @@
+import sveltePreprocess from 'svelte-preprocess';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+export default {
+	preprocess: sveltePreprocess({
+		postcss: {
+			// tests are run on project root and postcss-load-config uses cwd as default so force correct path here
+			configFilePath: path.join(path.dirname(fileURLToPath(import.meta.url)), 'postcss.config.cjs')
+		}
+	})
+};

packages/e2e-tests/autoprefixer-browerslist/vite.config.js

@@ -1,7 +1,7 @@
-const { svelte } = require('@sveltejs/vite-plugin-svelte');
-const { defineConfig } = require('vite');
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { defineConfig } from 'vite';
 
-module.exports = defineConfig(() => {
+export default defineConfig(() => {
 	return {
 		plugins: [svelte()],
 		build: {

packages/e2e-tests/configfile-custom/__tests__/configfile-custom.spec.ts

@@ -1,4 +1,5 @@
-import { editViteConfig, isBuild } from '../../testUtils';
+import { it, expect } from 'vitest';
+import { editViteConfig, isBuild, page, e2eServer } from '~utils';
 
 it('should load default config and work', async () => {
 	expect(e2eServer.logs.server.out).toContain('default svelte config loaded');

packages/e2e-tests/configfile-custom/package.json

@@ -14,5 +14,6 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.48.0",
     "vite": "^2.9.8"
-  }
+  },
+  "type": "module"
 }

packages/e2e-tests/configfile-custom/vite.config.js

@@ -1,7 +1,7 @@
-const { svelte } = require('@sveltejs/vite-plugin-svelte');
-const { defineConfig } = require('vite');
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { defineConfig } from 'vite';
 
-module.exports = defineConfig(() => {
+export default defineConfig(() => {
 	return {
 		root: './', // ensure custom root works, see https://github.com/sveltejs/vite-plugin-svelte/issues/113
 		plugins: [svelte()],

packages/e2e-tests/configfile-esm/__tests__/configfile-esm.spec.ts

@@ -1,4 +1,5 @@
-import { editViteConfig } from 'testUtils';
+import { it, expect } from 'vitest';
+import { editViteConfig, page } from '~utils';
 
 it('should load default config and work', async () => {
 	expect(await page.textContent('h1')).toMatch('Hello world!');

packages/e2e-tests/custom-extensions/__tests__/custom-extensions.spec.ts

@@ -1,4 +1,4 @@
-import { getText } from '../../testUtils';
+import { getText } from '~utils';
 
 test('should render svg', async () => {
 	expect(await getText('#test-svg')).toBe('Foo bar=bar');

packages/e2e-tests/custom-extensions/package.json

@@ -11,5 +11,6 @@
     "@sveltejs/vite-plugin-svelte": "workspace:*",
     "svelte": "^3.48.0",
     "vite": "^2.9.8"
-  }
+  },
+  "type": "module"
 }

packages/e2e-tests/custom-extensions/vite.config.js

@@ -1,7 +1,7 @@
-const { svelte } = require('@sveltejs/vite-plugin-svelte');
-const { defineConfig } = require('vite');
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { defineConfig } from 'vite';
 
-module.exports = defineConfig(() => {
+export default defineConfig(() => {
 	return {
 		plugins: [svelte({ extensions: ['.svelte', '.svg'] })],
 		build: {

packages/e2e-tests/e2e-server.js

@@ -1,9 +1,10 @@
 // script to start package.json dev/build/preview scripts with execa for e2e tests
-const execa = require('execa');
-const treeKill = require('tree-kill');
-const fs = require('fs');
-const path = require('path');
+import { execa } from 'execa';
+import treeKill from 'tree-kill';
+import fs from 'fs';
+import path from 'path';
 const isWin = process.platform === 'win32';
+
 async function startedOnPort(serverProcess, port, timeout) {
 	let id;
 	let stdoutListener;
@@ -40,7 +41,7 @@ async function startedOnPort(serverProcess, port, timeout) {
 	});
 }
 
-exports.serve = async function serve(root, isBuild, port) {
+export async function serve(root, isBuild, port) {
 	const logDir = path.join(root, 'logs');
 	const logs = {
 		server: null,
@@ -157,4 +158,4 @@ exports.serve = async function serve(root, isBuild, port) {
 			console.error('failed to close server process', e1);
 		}
 	}
-};
+}

packages/e2e-tests/env/__tests__/env.spec.ts

@@ -1,4 +1,4 @@
-import { findAssetFile, isBuild } from 'testUtils';
+import { findAssetFile, isBuild } from '~utils';
 
 // can't have no tests for test:serve
 it('dummy', () => {});

packages/e2e-tests/hmr/__tests__/hmr.spec.ts

@@ -4,14 +4,17 @@ import {
 	getEl,
 	getText,
 	editFileAndWaitForHmrComplete,
-	untilUpdated,
+	untilMatches,
 	sleep,
 	getColor,
 	editFile,
 	addFile,
 	removeFile,
-	editViteConfig
-} from '../../testUtils';
+	editViteConfig,
+	page,
+	browserLogs,
+	viteTestUrl
+} from '~utils';
 
 test('should render App', async () => {
 	expect(await getText('#app-header')).toBe('Test-App');
@@ -30,7 +33,11 @@ test('should render dynamic import', async () => {
 	const dynamicImportButton = await getEl('#button-import-dynamic');
 	expect(dynamicImportButton).toBeDefined();
 	await dynamicImportButton.click();
-	await untilUpdated(() => getText('#dynamic-import .label'), 'dynamic-import');
+	await untilMatches(
+		() => getText('#dynamic-import .label'),
+		'dynamic-import',
+		'dynamic import loaded after click'
+	);
 });
 
 test('should not have failed requests', async () => {
@@ -178,7 +185,6 @@ if (!isBuild) {
 			await updateHmrTest((content) => content.replace('color: red', 'color: green'));
 			expect(await getColor(`#hmr-test-1 .label`)).toBe('green');
 			expect(await getText(`#hmr-test-1 .counter`)).toBe('1');
-			await jest.resetModules();
 			await editFile('svelte.config.cjs', (content) =>
 				content
 					.replace('preprocess-inject', 'preprocess-inject-2')
@@ -197,7 +203,6 @@ if (!isBuild) {
 			await updateHmrTest((content) => content.replace('color: green', 'color: red'));
 			expect(await getColor(`#hmr-test-1 .label`)).toBe('red');
 			expect(await getText(`#hmr-test-1 .counter`)).toBe('1');
-			await jest.resetModules();
 			await removeFile('svelte.config.cjs');
 			await sleep(isWin ? 1000 : 500); // editing config restarts server, give it some time
 			await page.goto(viteTestUrl, { waitUntil: 'networkidle' });