@@ -91,11 +91,21 @@ primary guiding principle is:
9191
9292## Example
9393
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+
9498App.svelte
9599
96100``` html
97101<script >
98102 export let name
103+
104+ let buttonText = " Button Text" ;
105+
106+ function handleClick () {
107+ buttonText = " Button Clicked" ;
108+ }
99109 </script >
100110
101111<style >
@@ -105,30 +115,41 @@ App.svelte
105115 </style >
106116
107117<h1 >Hello {name}!</h1 >
118+
119+ <button on:click ={handleClick} >{buttonText}</button >
108120```
109121
110122App.spec.js
111123
112124``` 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" } });
118139
119- expect (getByText (' Hello world!' ))
120- })
140+ expect (getByText (" Hello world!" ));
141+ });
121142
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" } });
124145
125- fireEvent .click (getByText (' Button Text' ))
146+ fireEvent .click (getByText (" Button Text" ));
126147
127- const button = await waitForElement (() => getByText (' Button Clicked' ))
148+ const button = await waitForElement (() => getByText (" Button Clicked" ));
128149
129- expect (button).toBeInTheDocument ()
130- })
131- })
150+ expect (button).toBeInTheDocument ();
151+ });
152+ });
132153```
133154
134155## Installation
0 commit comments