tests: migrate to happy-dom and yarn pnpm mode

.yarnrc.yml

@@ -1,6 +1,6 @@
 enableGlobalCache: true
 
-nodeLinker: pnp
+nodeLinker: pnpm
 
 packageExtensions:
   "@types/testing-library__user-event@*":

package.json

@@ -39,6 +39,7 @@
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/user-event": "^14.5.1",
     "@types/chrome": "^0.0.246",
+    "@types/eslint": "^8.44.4",
     "@types/node": "^18.18.5",
     "@types/testing-library__user-event": "^4.2.0",
     "@typescript-eslint/eslint-plugin": "^6.7.5",
@@ -53,8 +54,7 @@
     "eslint-plugin-n": "^16.2.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-promise": "^6.1.1",
-    "jsdom": "^22.1.0",
-    "mq-polyfill": "^1.1.8",
+    "happy-dom": "^12.9.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.3",
     "stylis": "^3",

src/components/Modal/Modal.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, renderHook, screen } from '@test/helpers/solid'
+import { fireEvent, render, renderHook, screen, waitForElementToBeRemoved } from '@test/helpers/solid'
 import { createSignal } from 'solid-js'
 import ShowWithTransition from '@/components/ShowWithTransition'
 import Modal from '.'
@@ -66,7 +66,7 @@ describe('Modal', () => {
 
     setShouldOpen(false)
 
-    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    await waitForElementToBeRemoved(() => screen.queryByRole('dialog'))
   })
 
   it('closes on outside click', () => {

src/components/Modal/index.tsx

@@ -20,8 +20,11 @@ export default function Modal(props: ModalProps): JSX.Element {
   const transition = useContext(ShowWithTransitionContext)
 
   createEffect(() => {
-    // Manually call if by some reasons animations are not supported
-    if (typeof AnimationEvent === 'undefined' && !transition.isOpened) transition.onAfterExit()
+    // Emulate transition end event in test environment
+    if (import.meta.env.TEST && !transition.isOpened)
+      setTimeout(() => {
+        transition.onAfterExit()
+      }, 0)
   }, transition.isOpened)
 
   useDialogHooks({

src/components/SettingsButton/__snapshots__/SettingsButton.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`SettingsButton > renders a button 1`] = `
   <svg
     aria-hidden="true"
     class="svg_s1y7swdn"
-    viewBox="0 0 128 128"
+    viewbox="0 0 128 128"
     xmlns="http://www.w3.org/2000/svg"
   >
     <g

src/components/SettingsDialog/SettingsDialog.test.tsx

@@ -1,7 +1,7 @@
 import { render, renderHook, screen, waitFor, waitForElementToBeRemoved } from '@test/helpers/solid'
+import userEvent from '@testing-library/user-event'
 import { format } from 'date-fns'
 import { Suspense } from 'solid-js'
-import userEvent from '@testing-library/user-event'
 import createSettingsStorage, { type Settings } from '@/hooks/createSettingsStorage'
 import toISODate from '@/utils/to-iso-date'
 import SettingsDialog, { type SettingsDialogProps } from '.'

src/components/SettingsDialog/components/SettingsForm/index.tsx

@@ -1,5 +1,5 @@
-import { createComputed, createEffect, type JSX, on } from 'solid-js'
 import { createForm } from '@felte/solid'
+import { createComputed, createEffect, type JSX, on } from 'solid-js'
 import type { Settings } from '@/hooks/createSettingsStorage'
 import createUniqueIds from '@/hooks/createUniqueIds'
 import toISODate from '@/utils/to-iso-date'

test-support/extensions/window.ts

@@ -1,26 +1,5 @@
-import matchMediaPolyfill from 'mq-polyfill'
-
-if (window.matchMedia == null) {
-  matchMediaPolyfill(window)
-
-  // mq-polyfill still doesn't support addEventListener/removeEventListener
-
-  window.MediaQueryList.prototype.addEventListener = function (this: MediaQueryList, _type, listener) {
-    Reflect.apply(this.addListener, this, [listener])
-  }
-
-  window.MediaQueryList.prototype.removeEventListener = function (this: MediaQueryList, _type, listener) {
-    Reflect.apply(this.removeListener, this, [listener])
-  }
-}
+import { type Window } from 'happy-dom'
 
 window.resizeTo = function resizeTo(width, height) {
-  Object.assign(window, {
-    innerWidth: width,
-    innerHeight: height,
-    outerWidth: width,
-    outerHeight: height,
-  })
-
-  window.dispatchEvent(new window.Event('resize'))
+  ;(window as unknown as Window).happyDOM.setWindowSize({ width, height })
 }

tsconfig.json

@@ -21,7 +21,7 @@
     },
     "types": ["chrome", "vite/client"]
   },
-  "include": ["typings", "src", "test-support/env.d.ts"],
+  "include": ["typings", "src", "test-support"],
   "exclude": ["./dist"],
   "references": [
     { "path": "./tsconfig.node.json" }

vite.config.ts

@@ -1,12 +1,12 @@
 import { fileURLToPath } from 'node:url'
+import linaria from '@linaria/vite'
 import browserslistToEsbuild from 'browserslist-to-esbuild'
 import Stylis from 'stylis'
-import { configDefaults } from 'vitest/config'
-import linaria from '@linaria/vite'
 import { defineConfig } from 'vite'
 import { createHtmlPlugin } from 'vite-plugin-html'
 import solidPlugin from 'vite-plugin-solid'
 import { viteStaticCopy } from 'vite-plugin-static-copy'
+import { configDefaults } from 'vitest/config'
 import manifestPlugin from './lib/vite/manifest-plugin'
 
 export default defineConfig((config) => ({
@@ -45,10 +45,7 @@ export default defineConfig((config) => ({
     setupFiles: ['test-support/setup.ts'],
     watch: false,
     globals: true,
-    environment: 'jsdom',
-    transformMode: {
-      ssr: [],
-    },
+    environment: 'happy-dom',
     deps: {
       // We need browser variants
       inline: [/solid-js/, /@solidjs\/testing-library/, /@felte\/solid/, /solid-transition-group/, /@solid-primitives/],