Skip to content

Commit 3842014

Browse files
committed
use happy-dom instead of jsdom
Takes care of the lack of reactivity seen in #119
1 parent c0ff791 commit 3842014

File tree

6 files changed

+46
-12
lines changed

6 files changed

+46
-12
lines changed

package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,8 @@
6060
"@commitlint/cli": "^17.6.6",
6161
"@commitlint/config-conventional": "^17.6.6",
6262
"@sveltejs/vite-plugin-svelte": "^2.4.2",
63-
"@testing-library/jest-dom": "^5.16.5",
63+
"@testing-library/jest-dom": "^6.2.1",
64+
"@testing-library/user-event": "^14.5.2",
6465
"@vitest/coverage-c8": "^0.33.0",
6566
"all-contributors-cli": "^6.26.0",
6667
"doctoc": "^2.2.1",
@@ -72,8 +73,8 @@
7273
"eslint-plugin-simple-import-sort": "^10.0.0",
7374
"eslint-plugin-svelte": "^2.32.0",
7475
"eslint-plugin-vitest-globals": "^1.3.1",
76+
"happy-dom": "^13.2.1",
7577
"husky": "^8.0.3",
76-
"jsdom": "^22.1.0",
7778
"lint-staged": "^13.2.3",
7879
"npm-run-all": "^4.1.5",
7980
"prettier": "^3.0.0",
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script>
2+
// The text content of the paragraph is purposely not bound
3+
// with any svelte variable. The purpose of this exercise
4+
// is to reduce to the simplest form my use-case which is
5+
// to test changes done in html elements of a svelte component
6+
// by external helper class methods, which do not allow for
7+
// bindings to exist.
8+
const modify = () => {
9+
const par = document.querySelector(".info");
10+
par.innerText = "Modified by click";
11+
};
12+
</script>
13+
14+
<div>
15+
<p class="info" data-testid="info">Click to modify</p>
16+
<button on:click={modify} label="button">Modify</button>
17+
</div>

src/__tests__/gh119.test.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import userEvent from '@testing-library/user-event'
2+
import { expect, test } from 'vitest'
3+
4+
import { render, screen, waitFor } from '../pure.js'
5+
import Component from './fixtures/NonBound.svelte'
6+
7+
// fails with jsdom, but work with happy-dom
8+
9+
test('should modify the text after clicking the button', async () => {
10+
render(Component)
11+
const button = screen.getByRole('button')
12+
userEvent.click(button)
13+
const info = screen.getByTestId('info')
14+
15+
// The test fails independently of using waitFor or not.
16+
await waitFor(() => expect(info).toHaveTextContent('Modified by click'))
17+
})

src/__tests__/rerender.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* @jest-environment jsdom
2+
* @jest-environment happy-dom
33
*/
44
import { describe, expect, test } from 'vitest'
55

src/test-setup.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import * as matchers from '@testing-library/jest-dom/dist/matchers'
2-
import { afterEach, expect } from 'vitest'
1+
import '@testing-library/jest-dom/vitest'
32

4-
import { act, cleanup } from './pure.js'
3+
import { afterEach } from 'vitest'
54

6-
expect.extend(matchers)
5+
import { act, cleanup } from './pure.js'
76

87
afterEach(async () => {
98
await act()

vite.config.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
33

44
// https://vitejs.dev/config/
55
export default defineConfig({
6-
plugins: [svelte()],
7-
test: {
8-
environment: 'jsdom',
9-
setupFiles: ['./src/test-setup.js'],
10-
},
6+
plugins: [svelte()],
7+
test: {
8+
environment: 'happy-dom',
9+
setupFiles: ['./src/test-setup.js'],
10+
},
1111
})

0 commit comments

Comments
 (0)