@@ -91,11 +91,21 @@ primary guiding principle is:
91
91
92
92
## Example
93
93
94
+ You can check the live example at CodeSandbox, "Browser" tab renders App.svelte and "Tests" tab runs App.spec.js
95
+
96
+ - ** Live demo:** https://codesandbox.io/s/live-demo-svelte-testing-library-q8iv7
97
+
94
98
App.svelte
95
99
96
100
``` html
97
101
<script >
98
102
export let name
103
+
104
+ let buttonText = " Button Text" ;
105
+
106
+ function handleClick () {
107
+ buttonText = " Button Clicked" ;
108
+ }
99
109
</script >
100
110
101
111
<style >
@@ -105,30 +115,41 @@ App.svelte
105
115
</style >
106
116
107
117
<h1 >Hello {name}!</h1 >
118
+
119
+ <button on:click ={handleClick} >{buttonText}</button >
108
120
```
109
121
110
122
App.spec.js
111
123
112
124
``` javascript
113
- import App from ' ../src/App.svelte'
114
- import {render } from ' @testing-library/svelte'
115
- describe (' App' , () => {
116
- test (' should render greeting' , () => {
117
- const {getByText } = render (App, {props: {name: ' world' }})
125
+ import App from " ./App.svelte" ;
126
+ import {
127
+ render ,
128
+ cleanup ,
129
+ fireEvent ,
130
+ waitForElement
131
+ } from " @testing-library/svelte" ;
132
+ import " @testing-library/jest-dom/extend-expect" ;
133
+
134
+ afterEach (cleanup);
135
+
136
+ describe (" App" , () => {
137
+ test (" should render greeting" , () => {
138
+ const { getByText } = render (App, { props: { name: " world" } });
118
139
119
- expect (getByText (' Hello world!' ))
120
- })
140
+ expect (getByText (" Hello world!" ));
141
+ });
121
142
122
- test (' should change button text after click' , async () => {
123
- const {getByText } = render (App, {props: {name: ' world' }})
143
+ test (" should change button text after click" , async () => {
144
+ const { getByText } = render (App, { props: { name: " world" } });
124
145
125
- fireEvent .click (getByText (' Button Text' ))
146
+ fireEvent .click (getByText (" Button Text" ));
126
147
127
- const button = await waitForElement (() => getByText (' Button Clicked' ))
148
+ const button = await waitForElement (() => getByText (" Button Clicked" ));
128
149
129
- expect (button).toBeInTheDocument ()
130
- })
131
- })
150
+ expect (button).toBeInTheDocument ();
151
+ });
152
+ });
132
153
```
133
154
134
155
## Installation
0 commit comments