File tree 6 files changed +46
-12
lines changed
6 files changed +46
-12
lines changed Original file line number Diff line number Diff line change 60
60
"@commitlint/cli" : " ^17.6.6" ,
61
61
"@commitlint/config-conventional" : " ^17.6.6" ,
62
62
"@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" ,
64
65
"@vitest/coverage-c8" : " ^0.33.0" ,
65
66
"all-contributors-cli" : " ^6.26.0" ,
66
67
"doctoc" : " ^2.2.1" ,
72
73
"eslint-plugin-simple-import-sort" : " ^10.0.0" ,
73
74
"eslint-plugin-svelte" : " ^2.32.0" ,
74
75
"eslint-plugin-vitest-globals" : " ^1.3.1" ,
76
+ "happy-dom" : " ^13.2.1" ,
75
77
"husky" : " ^8.0.3" ,
76
- "jsdom" : " ^22.1.0" ,
77
78
"lint-staged" : " ^13.2.3" ,
78
79
"npm-run-all" : " ^4.1.5" ,
79
80
"prettier" : " ^3.0.0" ,
Original file line number Diff line number Diff line change
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 >
Original file line number Diff line number Diff line change
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
+ } )
Original file line number Diff line number Diff line change 1
1
/**
2
- * @jest -environment jsdom
2
+ * @jest -environment happy-dom
3
3
*/
4
4
import { describe , expect , test } from 'vitest'
5
5
Original file line number Diff line number Diff line change 1
- import * as matchers from '@testing-library/jest-dom/dist/matchers'
2
- import { afterEach , expect } from 'vitest'
1
+ import '@testing-library/jest-dom/vitest'
3
2
4
- import { act , cleanup } from './pure.js '
3
+ import { afterEach } from 'vitest '
5
4
6
- expect . extend ( matchers )
5
+ import { act , cleanup } from './pure.js'
7
6
8
7
afterEach ( async ( ) => {
9
8
await act ( )
Original file line number Diff line number Diff line change @@ -3,9 +3,9 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
3
3
4
4
// https://vitejs.dev/config/
5
5
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
+ } ,
11
11
} )
You can’t perform that action at this time.
0 commit comments