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 @@ + + +
+

Click to modify

+ +
diff --git a/src/__tests__/gh119.test.js b/src/__tests__/gh119.test.js new file mode 100644 index 0000000..1cfed51 --- /dev/null +++ b/src/__tests__/gh119.test.js @@ -0,0 +1,17 @@ +import userEvent from '@testing-library/user-event' +import { expect, test } from 'vitest' + +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..8d4c871 100644 --- a/src/test-setup.js +++ b/src/test-setup.js @@ -1,9 +1,8 @@ -import * as matchers from '@testing-library/jest-dom/dist/matchers' -import { afterEach, expect } from 'vitest' +import '@testing-library/jest-dom/vitest' -import { act, cleanup } from './pure.js' +import { afterEach } from 'vitest' -expect.extend(matchers) +import { act, cleanup } from './pure.js' afterEach(async () => { await act() 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'], + }, })