From c83597ebad76dd512c5f577127cc277d97434674 Mon Sep 17 00:00:00 2001
From: Yanick Champoux <yanick@babyl.ca>
Date: Tue, 23 Jan 2024 14:31:58 -0500
Subject: [PATCH] use happy-dom instead of jsdom

Takes care of the lack of reactivity seen in #119
---
 package.json                           |  5 +++--
 src/__tests__/fixtures/NonBound.svelte | 17 +++++++++++++++++
 src/__tests__/gh119.test.js            | 19 +++++++++++++++++++
 src/__tests__/rerender.test.js         |  2 +-
 src/test-setup.js                      |  4 +---
 vite.config.js                         | 10 +++++-----
 6 files changed, 46 insertions(+), 11 deletions(-)
 create mode 100644 src/__tests__/fixtures/NonBound.svelte
 create mode 100644 src/__tests__/gh119.test.js

diff --git a/package.json b/package.json
index c1cdb30..cf9ffe0 100644
--- a/package.json
+++ b/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",
diff --git a/src/__tests__/fixtures/NonBound.svelte b/src/__tests__/fixtures/NonBound.svelte
new file mode 100644
index 0000000..768f0be
--- /dev/null
+++ b/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>
diff --git a/src/__tests__/gh119.test.js b/src/__tests__/gh119.test.js
new file mode 100644
index 0000000..7945639
--- /dev/null
+++ b/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'))
+})
diff --git a/src/__tests__/rerender.test.js b/src/__tests__/rerender.test.js
index e3eddb2..4e965f0 100644
--- a/src/__tests__/rerender.test.js
+++ b/src/__tests__/rerender.test.js
@@ -1,5 +1,5 @@
 /**
- * @jest-environment jsdom
+ * @jest-environment happy-dom
  */
 import { describe, expect, test } from 'vitest'
 
diff --git a/src/test-setup.js b/src/test-setup.js
index fe15b57..80969a9 100644
--- a/src/test-setup.js
+++ b/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()
diff --git a/vite.config.js b/vite.config.js
index 65a1618..d54a87c 100644
--- a/vite.config.js
+++ b/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'],
+  },
 })