build: migrated from Jest to Vitest

Author: thorsten

.github/workflows/build.yml

@@ -75,5 +75,5 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
-      - name: Run Jest tests
+      - name: Run Vitest tests
         run: pnpm test

.gitignore

@@ -89,7 +89,7 @@ tests/content/core/config/ldap.php
 tests/content/upgrades
 tests/fixtures/path-to-delete/foo.bar.baz
 
-# Jest related stuff
+# Vitest related stuff
 coverage/*
 
 # PHPMD

CHANGELOG.md

@@ -9,6 +9,7 @@ This is a log of major user-visible changes in each phpMyFAQ release.
 ### phpMyFAQ v4.1.0-dev - unreleased
 
 - removed Webpack, now using Vite (Thorsten)
+- migrated from Jest to vitest (Thorsten)
 
 ### phpMyFAQ v4.0.0-RC.4 - 2024-11-09
 

jest.config.mjs

@@ -26,7 +26,9 @@
     "lint:fix": "prettier --write .",
     "prepare": "husky install",
     "pretty-quick": "pretty-quick",
-    "test": "jest"
+    "test": "vitest --run",
+    "test:watch": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
@@ -47,16 +49,12 @@
     "@babel/preset-env": "^7.26.0",
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
-    "@testing-library/jest-dom": "^6.6.3",
     "@types/node": "^20.16.5",
+    "@vitest/coverage-v8": "2.1.5",
     "autoprefixer": "^10.4.20",
-    "babel-jest": "^29.7.0",
     "babel-preset-env": "^1.7.0",
-    "extend-expect": "link:@testing-library/jest-dom/extend-expect",
     "husky": "^9.1.6",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-fetch-mock": "^3.0.3",
+    "jsdom": "^25.0.1",
     "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "pretty-quick": "^4.0.0",
@@ -66,7 +64,9 @@
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-minify": "^2.0.1",
-    "vite-plugin-static-copy": "^2.1.0"
+    "vite-plugin-static-copy": "^2.1.0",
+    "vitest": "^2.1.5",
+    "vitest-fetch-mock": "^0.4.2"
   },
   "husky": {
     "hooks": {

package.json

@@ -12,28 +12,22 @@
 # @license   http://www.mozilla.org/MPL/2.0/ Mozilla Public License Version 2.0
 # @link      https://www.phpmyfaq.de
 # @since     2004-11-13
-
 DirectoryIndex index.php
-
 # always follow the symlinks
 <IfModule mod_negotiation.c>
     Options +FollowSymlinks -MultiViews -Indexes
 </IfModule>
-
 # X-Frame-Options to prevent clickjacking
 Header always append X-Frame-Options SAMEORIGIN
-
 # CORS
 Header set Access-Control-Allow-Origin "*"
 Header set Access-Control-Allow-Methods "GET,PUT,POST,DELETE"
 Header set Access-Control-Allow-Headers "Content-Type, Authorization"
-
 # Set cache control
 <filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
     Header set Cache-Control "max-age=84600, no-store"
     Header set Pragma "no-cache"
 </filesMatch>
-
 # Set Gzip compression
 <IfModule mod_deflate.c>
     AddOutputFilterByType DEFLATE application/javascript
@@ -59,130 +53,98 @@ Header set Access-Control-Allow-Headers "Content-Type, Authorization"
     AddOutputFilterByType DEFLATE text/plain
     AddOutputFilterByType DEFLATE text/xml
 </IfModule>
-
 # Enable Expires headers to set expiration dates for various file types
 <IfModule mod_expires.c>
-  ExpiresActive On
-
-  # Set expiration for image files to 1 year
-  ExpiresByType image/jpeg "access plus 1 year"
-  ExpiresByType image/gif "access plus 1 year"
-  ExpiresByType image/png "access plus 1 year"
-  ExpiresByType image/webp "access plus 1 year"
-  ExpiresByType image/svg+xml "access plus 1 year"
-  ExpiresByType image/x-icon "access plus 1 year"
-
-  # Set expiration for video files to 1 year
-  ExpiresByType video/webm "access plus 1 year"
-  ExpiresByType video/mp4 "access plus 1 year"
-  ExpiresByType video/mpeg "access plus 1 year"
-
-  # Set expiration for font files to 1 year
-  ExpiresByType font/ttf "access plus 1 year"
-  ExpiresByType font/otf "access plus 1 year"
-  ExpiresByType font/woff "access plus 1 year"
-  ExpiresByType font/woff2 "access plus 1 year"
-  ExpiresByType application/font-woff "access plus 1 year"
-  ExpiresByType application/font-woff2 "access plus 1 year"
-
-  # Set expiration for CSS and JavaScript files to 1 year
-  ExpiresByType text/css "access plus 1 year"
-  ExpiresByType text/javascript "access plus 1 year"
-  ExpiresByType application/javascript "access plus 1 year"
-
-  # Set expiration for other file types to 1 year
-  ExpiresByType application/pdf "access plus 1 year"
-  ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
+    ExpiresActive On
+    # Set expiration for image files to 1 year
+    ExpiresByType image/jpeg "access plus 1 year"
+    ExpiresByType image/gif "access plus 1 year"
+    ExpiresByType image/png "access plus 1 year"
+    ExpiresByType image/webp "access plus 1 year"
+    ExpiresByType image/svg+xml "access plus 1 year"
+    ExpiresByType image/x-icon "access plus 1 year"
+    # Set expiration for video files to 1 year
+    ExpiresByType video/webm "access plus 1 year"
+    ExpiresByType video/mp4 "access plus 1 year"
+    ExpiresByType video/mpeg "access plus 1 year"
+    # Set expiration for font files to 1 year
+    ExpiresByType font/ttf "access plus 1 year"
+    ExpiresByType font/otf "access plus 1 year"
+    ExpiresByType font/woff "access plus 1 year"
+    ExpiresByType font/woff2 "access plus 1 year"
+    ExpiresByType application/font-woff "access plus 1 year"
+    ExpiresByType application/font-woff2 "access plus 1 year"
+    # Set expiration for CSS and JavaScript files to 1 year
+    ExpiresByType text/css "access plus 1 year"
+    ExpiresByType text/javascript "access plus 1 year"
+    ExpiresByType application/javascript "access plus 1 year"
+    # Set expiration for other file types to 1 year
+    ExpiresByType application/pdf "access plus 1 year"
+    ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
 </IfModule>
-
 # Enable Cache-Control headers to set caching policies for various file types
 <IfModule mod_headers.c>
-  <FilesMatch "\.(flv|gif|ico|jpg|jpeg|mp4|mpeg|png|svg|swf|webp|webm|js|pdf|css|woff|woff2)$">
-    Header set Cache-Control "max-age=31536000, public"
-  </FilesMatch>
+    <FilesMatch "\.(flv|gif|ico|jpg|jpeg|mp4|mpeg|png|svg|swf|webp|webm|js|pdf|css|woff|woff2)$">
+        Header set Cache-Control "max-age=31536000, public"
+    </FilesMatch>
 </IfModule>
-
-
 # Set mod_rewrite
 <IfModule mod_rewrite.c>
     # This has to be 'On'
     RewriteEngine On
-
     <IfModule mod_fcgid.c>
         RewriteCond %{HTTP:Authorization} .
         RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
     </IfModule>
-
     # the path to your phpMyFAQ installation
-    RewriteBase /
-
+    RewriteBase //localhost/phpmyfaq-test/./phpmyfaq/src/libs/bin/phpunit/
     # Error pages
     ErrorDocument 404 /index.php?action=404
-
     # General pages
     RewriteRule add-faq.html$ index.php?action=add [L,QSA]
     RewriteRule add-question.html$ index.php?action=ask [L,QSA]
     RewriteRule show-categories.html$ index.php?action=show [L,QSA]
     RewriteRule ^(search|open-questions|contact|glossary|overview|login|privacy)\.html$ index.php?action=$1 [L,QSA]
     RewriteRule ^(login) index.php?action=login [L,QSA]
-
     # start page
     RewriteRule ^index.html$ index.php [PT]
-
     # a solution ID page
     RewriteCond %{REQUEST_URI} solution_id_([0-9]+)\.html$ [NC]
     RewriteRule ^solution_id_(.*)\.html$ index.php?solution_id=$1 [L,QSA]
-
     # the bookmarks page
     RewriteRule ^bookmarks\.html$ index.php?action=bookmarks [L,QSA]
-
     # phpMyFAQ faq record page
     RewriteRule ^content/([0-9]+)/([0-9]+)/([a-z\-]+)/(.+)\.htm(l?)$ index.php?action=faq&cat=$1&id=$2&artlang=$3 [L,QSA]
-
     # phpMyFAQ category page with page count
     RewriteRule ^category/([0-9]+)/([0-9]+)/(.+)\.htm(l?)$ index.php?action=show&cat=$1&seite=$2 [L,QSA]
-
     # phpMyFAQ category page
     RewriteRule ^category/([0-9]+)/(.+)\.htm(l?)$ index.php?action=show&cat=$1 [L,QSA]
-
     # phpMyFAQ news page
     RewriteRule ^news/([0-9]+)/([a-z\-]+)/(.+)\.htm(l?)$ index.php?action=news&newsid=$1&newslang=$2 [L,QSA]
-
     # phpMyFAQ sitemap
     RewriteRule ^sitemap/([^\/]+)/([a-z\-]+)\.htm(l?)$ index.php?action=sitemap&letter=$1&lang=$2 [L,QSA]
-
     # phpMyFAQ Google sitemap
     RewriteRule ^sitemap.xml$ sitemap.xml.php [L]
     RewriteRule ^sitemap.gz$ sitemap.xml.php?gz=1 [L]
     RewriteRule ^sitemap.xml.gz$ sitemap.xml.php?gz=1 [L]
-
     # phpMyFAQ tags page with page count
     RewriteRule ^tags/([0-9]+)/([0-9]+)/(.+)\.htm(l?)$ index.php?action=search&tagging_id=$1&seite=$2 [L,QSA]
-
     # phpMyFAQ tags page
     RewriteRule ^tags/([0-9]+)/([^\/]+)\.htm(l?)$ index.php?action=search&tagging_id=$1 [L,QSA]
-
     # Authentication services
     RewriteRule ^services/webauthn(.*) services/webauthn/index.php [L,QSA]
-
     # User pages
     RewriteRule ^user/(ucp|bookmarks|request-removal|logout|register) index.php?action=$1 [L,QSA]
-
     # Setup and update pages
     RewriteRule ^setup/(.*) setup/index.php [L,QSA]
     RewriteRule ^update/(.*) update/index.php [L,QSA]
-
     # Administration API
     RewriteRule ^admin/api/(.*) admin/api/index.php [L,QSA]
-
     # Private APIs
     RewriteRule ^api/(autocomplete|bookmark/delete|bookmark/create|user/data/update|user/password/update|user/request-removal|user/remove-twofactor|contact|voting|register|captcha|share|comment/create|faq/create|question/create|webauthn/prepare|webauthn/register|webauthn/prepare-login|webauthn/login) api/index.php [L,QSA]
-
     # Setup APIs
     RewriteRule ^api/setup/(check|backup|update-database) api/index.php [L,QSA]
-
     # REST API v3.0 and v3.1
     # * http://[...]/api/v3.x/<ACTION>
     RewriteRule ^api/v3\.[01]/(.*) api/index.php [L,QSA]
-
 </IfModule>

phpmyfaq/.htaccess

@@ -1,11 +1,13 @@
 import { fetchAutoCompleteData } from './autocomplete';
-import fetchMock from 'jest-fetch-mock';
+import createFetchMock from 'vitest-fetch-mock';
 
-fetchMock.enableMocks();
+const fetchMocker = createFetchMock(vi);
+
+fetchMocker.enableMocks();
 
 describe('fetchAutoCompleteData', () => {
   beforeEach(() => {
-    fetch.resetMocks();
+    fetchMocker.resetMocks();
   });
 
   it('should return autocomplete data when the response is successful', async () => {

phpmyfaq/assets/src/api/autocomplete.test.js

@@ -6,11 +6,11 @@ describe('fetchCaptchaImage function', () => {
 
   beforeEach(() => {
     // Mocking fetch function
-    fetchMock = jest.fn();
+    fetchMock = vi.fn();
     global.fetch = fetchMock;
 
     // Mocking console.error
-    consoleErrorMock = jest.spyOn(console, 'error').mockImplementation(() => {});
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
   });
 
   afterEach(() => {

phpmyfaq/assets/src/api/captcha.test.js

@@ -4,7 +4,7 @@ import { serialize } from '../utils';
 describe('createComment function', () => {
   it('creates a comment successfully', async () => {
     // Mocking fetch function
-    global.fetch = jest.fn().mockResolvedValue({
+    global.fetch = vi.fn().mockResolvedValue({
       status: 200,
       json: () => Promise.resolve({ message: 'Comment created successfully' }),
     });
@@ -31,7 +31,7 @@ describe('createComment function', () => {
 
   it('throws an error if network response is not ok', async () => {
     // Mocking fetch function
-    global.fetch = jest.fn().mockResolvedValue({
+    global.fetch = vi.fn().mockResolvedValue({
       status: 400,
       json: () => Promise.resolve({ error: 'Something went wrong' }),
     });

phpmyfaq/assets/src/api/comment.test.js

@@ -4,7 +4,7 @@ import { serialize } from '../utils';
 describe('send function', () => {
   it('sends a message successfully', async () => {
     // Mocking fetch function
-    global.fetch = jest.fn().mockResolvedValue({
+    global.fetch = vi.fn().mockResolvedValue({
       status: 200,
       json: () => Promise.resolve({ success: 'Contact message sent successfully' }),
     });
@@ -31,7 +31,7 @@ describe('send function', () => {
 
   it('throws an error if network response is not ok', async () => {
     // Mocking fetch function
-    global.fetch = jest.fn().mockResolvedValue({
+    global.fetch = vi.fn().mockResolvedValue({
       status: 400,
       json: () => Promise.resolve({ error: 'Something went wrong' }),
     });