diff --git a/README.md b/README.md
index 748522a..7f6a1bd 100644
--- a/README.md
+++ b/README.md
@@ -91,11 +91,21 @@ primary guiding principle is:
## Example
+You can check the live example at CodeSandbox, "Browser" tab renders App.svelte and "Tests" tab runs App.spec.js
+
+- **Live demo:** https://codesandbox.io/s/live-demo-svelte-testing-library-q8iv7
+
App.svelte
```html
Hello {name}!
+
+
```
App.spec.js
```javascript
-import App from '../src/App.svelte'
-import {render} from '@testing-library/svelte'
-describe('App', () => {
- test('should render greeting', () => {
- const {getByText} = render(App, {props: {name: 'world'}})
+import App from "./App.svelte";
+import {
+ render,
+ cleanup,
+ fireEvent,
+ waitForElement
+} from "@testing-library/svelte";
+import "@testing-library/jest-dom/extend-expect";
+
+afterEach(cleanup);
+
+describe("App", () => {
+ test("should render greeting", () => {
+ const { getByText } = render(App, { props: { name: "world" } });
- expect(getByText('Hello world!'))
- })
+ expect(getByText("Hello world!"));
+ });
- test('should change button text after click', async () => {
- const {getByText} = render(App, {props: {name: 'world'}})
+ test("should change button text after click", async () => {
+ const { getByText } = render(App, { props: { name: "world" } });
- fireEvent.click(getByText('Button Text'))
+ fireEvent.click(getByText("Button Text"));
- const button = await waitForElement(() => getByText('Button Clicked'))
+ const button = await waitForElement(() => getByText("Button Clicked"));
- expect(button).toBeInTheDocument()
- })
-})
+ expect(button).toBeInTheDocument();
+ });
+});
```
## Installation