use happy-dom instead of jsdom

Takes care of the lack of reactivity seen in #119

package.json

@@ -60,7 +60,8 @@
     "@commitlint/cli": "^17.6.6",
     "@commitlint/config-conventional": "^17.6.6",
     "@sveltejs/vite-plugin-svelte": "^2.4.2",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.2.1",
+    "@testing-library/user-event": "^14.5.2",
     "@vitest/coverage-c8": "^0.33.0",
     "all-contributors-cli": "^6.26.0",
     "doctoc": "^2.2.1",
@@ -72,8 +73,8 @@
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-svelte": "^2.32.0",
     "eslint-plugin-vitest-globals": "^1.3.1",
+    "happy-dom": "^13.2.1",
     "husky": "^8.0.3",
-    "jsdom": "^22.1.0",
     "lint-staged": "^13.2.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.0",

src/__tests__/fixtures/NonBound.svelte

@@ -0,0 +1,17 @@
+<script>
+  // The text content of the paragraph is purposely not bound
+  // with any svelte variable. The purpose of this exercise
+  // is to reduce to the simplest form my use-case which is
+  // to test changes done in html elements of a svelte component
+  // by external helper class methods, which do not allow for
+  // bindings to exist.
+  const modify = () => {
+    const par = document.querySelector(".info");
+    par.innerText = "Modified by click";
+  };
+</script>
+
+<div>
+  <p class="info" data-testid="info">Click to modify</p>
+  <button on:click={modify} label="button">Modify</button>
+</div>

src/__tests__/gh119.test.js

@@ -0,0 +1,19 @@
+import { test, expect } from 'vitest'
+
+import { tick } from 'svelte'
+import userEvent from '@testing-library/user-event'
+import { render, screen, waitFor } from '../pure.js'
+
+import Component from './fixtures/NonBound.svelte'
+
+// fails with jsdom, but work with happy-dom
+
+test('should modify the text after clicking the button', async () => {
+  render(Component)
+  const button = screen.getByRole('button')
+  userEvent.click(button)
+  const info = screen.getByTestId('info')
+
+  // The test fails independently of using waitFor or not.
+  await waitFor(() => expect(info).toHaveTextContent('Modified by click'))
+})

src/__tests__/rerender.test.js

@@ -1,5 +1,5 @@
 /**
- * @jest-environment jsdom
+ * @jest-environment happy-dom
  */
 import { describe, expect, test } from 'vitest'
 

src/test-setup.js

@@ -1,10 +1,8 @@
-import * as matchers from '@testing-library/jest-dom/dist/matchers'
+import '@testing-library/jest-dom/vitest'
 import { afterEach, expect } from 'vitest'
 
 import { act, cleanup } from './pure.js'
 
-expect.extend(matchers)
-
 afterEach(async () => {
   await act()
   cleanup()

vite.config.js

@@ -3,9 +3,9 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [svelte()],
-    test: {
-        environment: 'jsdom',
-        setupFiles: ['./src/test-setup.js'],
-    },
+  plugins: [svelte()],
+  test: {
+    environment: 'happy-dom',
+    setupFiles: ['./src/test-setup.js'],
+  },
 })