@testing-library/svelte 4.1.0 → 4.2.0

package/README.md

@@ -38,7 +38,6 @@
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
-
 - [The Problem](#the-problem)
 - [This Solution](#this-solution)
 - [Installation](#installation)
@@ -119,23 +118,29 @@ Thanks goes to these people ([emoji key][emojis]):
 <!-- prettier-ignore-start -->
 <!-- markdownlint-disable -->
 <table>
-  <tr>
-    <td align="center"><a href="https://github.com/benmonro"><img src="https://avatars3.githubusercontent.com/u/399236?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ben Monro</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=benmonro" title="Code">💻</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=benmonro" title="Tests">⚠️</a> <a href="#ideas-benmonro" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=benmonro" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://twitter.com/EmilTholin"><img src="https://avatars0.githubusercontent.com/u/11573167?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Emil Tholin</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=EmilTholin" title="Code">💻</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=EmilTholin" title="Tests">⚠️</a> <a href="#ideas-EmilTholin" title="Ideas, Planning, & Feedback">🤔</a></td>
-    <td align="center"><a href="https://medium.com/@oieduardorabelo"><img src="https://avatars1.githubusercontent.com/u/829902?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Eduardo Rabelo</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=oieduardorabelo" title="Tests">⚠️</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=oieduardorabelo" title="Code">💻</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=oieduardorabelo" title="Documentation">📖</a> <a href="#example-oieduardorabelo" title="Examples">💡</a></td>
-    <td align="center"><a href="http://timdeschryver.dev"><img src="https://avatars1.githubusercontent.com/u/28659384?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tim Deschryver</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=timdeschryver" title="Documentation">📖</a></td>
-    <td align="center"><a href="http://www.ematipico.com"><img src="https://avatars3.githubusercontent.com/u/602478?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Emanuele</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=ematipico" title="Code">💻</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=ematipico" title="Tests">⚠️</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=ematipico" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/pngwn"><img src="https://avatars1.githubusercontent.com/u/12937446?v=4?s=100" width="100px;" alt=""/><br /><sub><b>pngwn</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=pngwn" title="Code">💻</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=pngwn" title="Tests">⚠️</a></td>
-    <td align="center"><a href="https://twitter.com/sebsilbermann"><img src="https://avatars3.githubusercontent.com/u/12292047?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sebastian Silbermann</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=eps1lon" title="Code">💻</a></td>
-  </tr>
-  <tr>
-    <td align="center"><a href="https://github.com/mihar-22"><img src="https://avatars3.githubusercontent.com/u/14304599?s=460&v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rahim Alwer</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=mihar-22" title="Code">💻</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=mihar-22" title="Documentation">📖</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=mihar-22" title="Tests">⚠️</a> <a href="https://github.com/testing-library/svelte-testing-library/pulls?q=is%3Apr+reviewed-by%3Amihar-22" title="Reviewed Pull Requests">👀</a></td>
-    <td align="center"><a href="https://github.com/MirrorBytes"><img src="https://avatars3.githubusercontent.com/u/22119469?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Bob</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/issues?q=author%3AMirrorBytes" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=MirrorBytes" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/ronmerkin"><img src="https://avatars.githubusercontent.com/u/17492527?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ron Merkin</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=ronmerkin" title="Code">💻</a></td>
-    <td align="center"><a href="http://www.benmccann.com"><img src="https://avatars.githubusercontent.com/u/322311?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ben McCann</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=benmccann" title="Tests">⚠️</a></td>
-    <td align="center"><a href="https://johnbowser.dev/"><img src="https://avatars.githubusercontent.com/u/66637570?v=4?s=100" width="100px;" alt=""/><br /><sub><b>John Bowser</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=jgbowser" title="Code">💻</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=jgbowser" title="Tests">⚠️</a></td>
-    <td align="center"><a href="https://github.com/ysaskia"><img src="https://avatars.githubusercontent.com/u/1370679?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yoann</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=ysaskia" title="Code">💻</a></td>
-  </tr>
+  <tbody>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/benmonro"><img src="https://avatars3.githubusercontent.com/u/399236?v=4?s=100" width="100px;" alt="Ben Monro"/><br /><sub><b>Ben Monro</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=benmonro" title="Code">💻</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=benmonro" title="Tests">⚠️</a> <a href="#ideas-benmonro" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=benmonro" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://twitter.com/EmilTholin"><img src="https://avatars0.githubusercontent.com/u/11573167?v=4?s=100" width="100px;" alt="Emil Tholin"/><br /><sub><b>Emil Tholin</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=EmilTholin" title="Code">💻</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=EmilTholin" title="Tests">⚠️</a> <a href="#ideas-EmilTholin" title="Ideas, Planning, & Feedback">🤔</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://medium.com/@oieduardorabelo"><img src="https://avatars1.githubusercontent.com/u/829902?v=4?s=100" width="100px;" alt="Eduardo Rabelo"/><br /><sub><b>Eduardo Rabelo</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=oieduardorabelo" title="Tests">⚠️</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=oieduardorabelo" title="Code">💻</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=oieduardorabelo" title="Documentation">📖</a> <a href="#example-oieduardorabelo" title="Examples">💡</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://timdeschryver.dev"><img src="https://avatars1.githubusercontent.com/u/28659384?v=4?s=100" width="100px;" alt="Tim Deschryver"/><br /><sub><b>Tim Deschryver</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=timdeschryver" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://www.ematipico.com"><img src="https://avatars3.githubusercontent.com/u/602478?v=4?s=100" width="100px;" alt="Emanuele"/><br /><sub><b>Emanuele</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=ematipico" title="Code">💻</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=ematipico" title="Tests">⚠️</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=ematipico" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/pngwn"><img src="https://avatars1.githubusercontent.com/u/12937446?v=4?s=100" width="100px;" alt="pngwn"/><br /><sub><b>pngwn</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=pngwn" title="Code">💻</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=pngwn" title="Tests">⚠️</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://twitter.com/sebsilbermann"><img src="https://avatars3.githubusercontent.com/u/12292047?v=4?s=100" width="100px;" alt="Sebastian Silbermann"/><br /><sub><b>Sebastian Silbermann</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=eps1lon" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/mihar-22"><img src="https://avatars3.githubusercontent.com/u/14304599?s=460&v=4?s=100" width="100px;" alt="Rahim Alwer"/><br /><sub><b>Rahim Alwer</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=mihar-22" title="Code">💻</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=mihar-22" title="Documentation">📖</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=mihar-22" title="Tests">⚠️</a> <a href="https://github.com/testing-library/svelte-testing-library/pulls?q=is%3Apr+reviewed-by%3Amihar-22" title="Reviewed Pull Requests">👀</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/MirrorBytes"><img src="https://avatars3.githubusercontent.com/u/22119469?v=4?s=100" width="100px;" alt="Bob"/><br /><sub><b>Bob</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/issues?q=author%3AMirrorBytes" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=MirrorBytes" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/ronmerkin"><img src="https://avatars.githubusercontent.com/u/17492527?v=4?s=100" width="100px;" alt="Ron Merkin"/><br /><sub><b>Ron Merkin</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=ronmerkin" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://www.benmccann.com"><img src="https://avatars.githubusercontent.com/u/322311?v=4?s=100" width="100px;" alt="Ben McCann"/><br /><sub><b>Ben McCann</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=benmccann" title="Tests">⚠️</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://johnbowser.dev/"><img src="https://avatars.githubusercontent.com/u/66637570?v=4?s=100" width="100px;" alt="John Bowser"/><br /><sub><b>John Bowser</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=jgbowser" title="Code">💻</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=jgbowser" title="Tests">⚠️</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/ysitbon"><img src="https://avatars.githubusercontent.com/u/1370679?v=4?s=100" width="100px;" alt="Yoann"/><br /><sub><b>Yoann</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=ysitbon" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://techblog.babyl.ca/"><img src="https://avatars.githubusercontent.com/u/19954?v=4?s=100" width="100px;" alt="Yanick Champoux"/><br /><sub><b>Yanick Champoux</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=yanick" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://michael.cousins.io/"><img src="https://avatars.githubusercontent.com/u/2963448?v=4?s=100" width="100px;" alt="Michael Cousins"/><br /><sub><b>Michael Cousins</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=mcous" title="Code">💻</a></td>
+    </tr>
+  </tbody>
 </table>
 
 <!-- markdownlint-restore -->
@@ -154,8 +159,8 @@ Contributions of any kind welcome!
 
 [npm]: https://www.npmjs.com/
 [node]: https://nodejs.org
-[build-badge]: https://img.shields.io/travis/testing-library/svelte-testing-library.svg?style=flat-square
-[build]: https://travis-ci.org/testing-library/svelte-testing-library
+[build-badge]: https://img.shields.io/github/actions/workflow/status/testing-library/svelte-testing-library/release.yml?style=flat-square
+[build]: https://github.com/testing-library/svelte-testing-library/actions
 [coverage-badge]: https://img.shields.io/codecov/c/github/testing-library/svelte-testing-library.svg?style=flat-square
 [coverage]: https://codecov.io/github/testing-library/svelte-testing-library
 [version-badge]: https://img.shields.io/npm/v/@testing-library/svelte.svg?style=flat-square
@@ -164,7 +169,7 @@ Contributions of any kind welcome!
 [npmtrends]: http://www.npmtrends.com/@testing-library/svelte
 [discord-badge]: https://img.shields.io/discord/723559267868737556.svg?color=7389D8&labelColor=6A7EC2&logo=discord&logoColor=ffffff&style=flat-square
 [discord]: https://discord.gg/testing-library
-[license-badge]: https://img.shields.io/github/license/testing-library/svelte-testing-library?color=b
+[license-badge]: https://img.shields.io/github/license/testing-library/svelte-testing-library?color=b&style=flat-square
 [license]: https://github.com/testing-library/svelte-testing-library/blob/main/LICENSE
 [prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
 [prs]: http://makeapullrequest.com
@@ -187,4 +192,3 @@ Contributions of any kind welcome!
 [stackoverflow]: https://stackoverflow.com/questions/tagged/svelte-testing-library
 
 <!-- prettier-ignore-end -->
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testing-library/svelte",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Simple and complete Svelte testing utilities that encourage good testing practices.",
   "main": "src/index.js",
   "exports": {
@@ -44,73 +44,61 @@
   ],
   "scripts": {
     "toc": "doctoc README.md",
-    "lint": "(prettier . --check || true) && eslint .",
+    "lint": "prettier . --check && eslint .",
+    "lint:delta": "npm-run-all -p prettier:delta eslint:delta",
+    "prettier:delta": "prettier --check `./scripts/changed-files`",
+    "eslint:delta": "eslint `./scripts/changed-files`",
     "format": "prettier . --write && eslint . --fix",
+    "format:delta": "npm-run-all format:prettier:delta format:eslint:delta",
+    "format:prettier:delta": "prettier --write `./scripts/changed-files`",
+    "format:eslint:delta": "eslint --fix `./scripts/changed-files`",
+    "setup": "npm install && npm run validate",
     "test": "vitest run --coverage",
     "test:watch": "vitest",
     "test:update": "vitest run --update",
-    "setup": "npm install && npm run validate",
-    "validate": "npm-run-all lint test",
+    "test:vitest:jsdom": "vitest run --coverage --environment jsdom",
+    "test:vitest:happy-dom": "vitest run --coverage --environment happy-dom",
+    "types": "svelte-check",
+    "validate": "npm-run-all test:vitest:* types",
     "contributors:add": "all-contributors add",
     "contributors:generate": "all-contributors generate"
   },
   "peerDependencies": {
-    "svelte": "^3 || ^4"
+    "svelte": "^3 || ^4 || ^5"
   },
   "dependencies": {
     "@testing-library/dom": "^9.3.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.6.6",
-    "@commitlint/config-conventional": "^17.6.6",
-    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "@testing-library/jest-dom": "^6.3.0",
-    "@typescript-eslint/eslint-plugin": "^6.19.1",
-    "@typescript-eslint/parser": "^6.19.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@typescript-eslint/eslint-plugin": "6.19.1",
+    "@typescript-eslint/parser": "6.19.1",
     "@vitest/coverage-v8": "^0.33.0",
-    "all-contributors-cli": "^6.26.0",
+    "all-contributors-cli": "^6.26.1",
     "doctoc": "^2.2.1",
-    "eslint": "^8.43.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-n": "^16.0.1",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-svelte": "^2.32.0",
-    "eslint-plugin-vitest-globals": "^1.3.1",
-    "husky": "^8.0.3",
+    "eslint": "8.56.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-config-standard": "17.1.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-json-files": "^4.1.0",
+    "eslint-plugin-n": "16.6.2",
+    "eslint-plugin-promise": "6.1.1",
+    "eslint-plugin-simple-import-sort": "10.0.0",
+    "eslint-plugin-svelte": "2.35.1",
+    "eslint-plugin-vitest-globals": "1.4.0",
+    "expect-type": "^0.17.3",
+    "happy-dom": "^13.3.1",
     "jsdom": "^22.1.0",
-    "lint-staged": "^13.2.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.0",
-    "prettier-plugin-svelte": "^3.1.2",
-    "svelte": "^4.0.1",
+    "prettier": "3.2.4",
+    "prettier-plugin-svelte": "3.1.2",
+    "svelte": "^4.2.10",
+    "svelte-check": "^3.6.3",
     "svelte-jester": "^3.0.0",
     "typescript": "^5.3.3",
-    "vite": "^4.3.9",
+    "vite": "^5.1.1",
     "vitest": "^0.33.0"
-  },
-  "lint-staged": {
-    "{README.md,.all-contributorsrc}": [
-      "npm run toc",
-      "npm run contributors:generate",
-      "npx --no-install prettier --write README.md .all-contributorsrc",
-      "git add README.md .all-contributorsrc"
-    ],
-    "src/**/*": [
-      "npx --no-install vitest related --run"
-    ],
-    "*.{js,cjs,ts,svelte,json,yml,yaml}": [
-      "npx --no-install prettier --check"
-    ],
-    "*.{js,cjs,ts,svelte}": [
-      "npx --no-install eslint"
-    ]
-  },
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ]
   }
 }

package/src/__tests__/__snapshots__/render.test.js.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`render > should accept svelte component options 1`] = `
+exports[`render > should accept svelte v4 component options 1`] = `
 <body>
   <div>
     <h1
@@ -18,8 +18,31 @@ exports[`render > should accept svelte component options 1`] = `
     <button>
       Button
     </button>
-    <!--&lt;Comp&gt;-->
     <div />
   </div>
 </body>
 `;
+
+exports[`render > should accept svelte v5 component options 1`] = `
+<body>
+  
+  
+  
+  <section>
+    <h1
+      data-testid="test"
+    >
+      Hello World!
+    </h1>
+     
+    <div>
+      we have context
+    </div>
+     
+    <button>
+      Button
+    </button>
+    
+  </section>
+</body>
+`;

package/src/__tests__/cleanup.test.js

@@ -0,0 +1,35 @@
+import { describe, expect, test, vi } from 'vitest'
+
+import { act, cleanup, render } from '..'
+import Mounter from './fixtures/Mounter.svelte'
+
+const onExecuted = vi.fn()
+const onDestroyed = vi.fn()
+const renderSubject = () => render(Mounter, { onExecuted, onDestroyed })
+
+describe('cleanup', () => {
+  test('cleanup deletes element', async () => {
+    renderSubject()
+    cleanup()
+
+    expect(document.body).toBeEmptyDOMElement()
+  })
+
+  test('cleanup unmounts component', async () => {
+    await act(renderSubject)
+    cleanup()
+
+    expect(onDestroyed).toHaveBeenCalledOnce()
+  })
+
+  test('cleanup handles unexpected errors during mount', () => {
+    onExecuted.mockImplementation(() => {
+      throw new Error('oh no!')
+    })
+
+    expect(renderSubject).toThrowError()
+    cleanup()
+
+    expect(document.body).toBeEmptyDOMElement()
+  })
+})

package/src/__tests__/fixtures/Mounter.svelte

@@ -0,0 +1,19 @@
+<script>
+  import { onDestroy, onMount } from 'svelte'
+
+  export let onExecuted = undefined
+  export let onMounted = undefined
+  export let onDestroyed = undefined
+
+  onExecuted?.()
+
+  onMount(() => {
+    onMounted?.()
+  })
+
+  onDestroy(() => {
+    onDestroyed?.()
+  })
+</script>
+
+<button />

package/src/__tests__/fixtures/Rerender.svelte

@@ -0,0 +1,17 @@
+<script>
+  import { onDestroy, onMount } from 'svelte'
+
+  export let onExecuted = undefined
+  export let onMounted = undefined
+  export let onDestroyed = undefined
+
+  export let name = ''
+
+  onExecuted?.()
+
+  onMount(() => onMounted?.())
+
+  onDestroy(() => onDestroyed?.())
+</script>
+
+<div data-testid="test">Hello {name}!</div>

package/src/__tests__/fixtures/Simple.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  export let name: string
+</script>
+
+<h1>hello {name}</h1>

package/src/__tests__/fixtures/Transitioner.svelte

@@ -0,0 +1,18 @@
+<script>
+  import { blur } from 'svelte/transition'
+
+  let show = false
+  let introDone = false
+</script>
+
+<button on:click={() => (show = true)}>Show</button>
+
+{#if show}
+  <div in:blur={{ duration: 64 }} on:introend={() => (introDone = true)}>
+    {#if introDone}
+      <p data-testid="intro-done">Done</p>
+    {:else}
+      <p data-testid="intro-pending">Pending</p>
+    {/if}
+  </div>
+{/if}

package/src/__tests__/mount.test.js

@@ -0,0 +1,33 @@
+import { describe, expect, test, vi } from 'vitest'
+
+import { act, render, screen } from '..'
+import Mounter from './fixtures/Mounter.svelte'
+
+const onMounted = vi.fn()
+const onDestroyed = vi.fn()
+const renderSubject = () => render(Mounter, { onMounted, onDestroyed })
+
+describe('mount and destroy', () => {
+  test('component is mounted', async () => {
+    renderSubject()
+
+    const content = screen.getByRole('button')
+
+    expect(content).toBeInTheDocument()
+    await act()
+    expect(onMounted).toHaveBeenCalledOnce()
+  })
+
+  test('component is destroyed', async () => {
+    const { unmount } = renderSubject()
+
+    await act()
+    unmount()
+
+    const content = screen.queryByRole('button')
+
+    expect(content).not.toBeInTheDocument()
+    await act()
+    expect(onDestroyed).toHaveBeenCalledOnce()
+  })
+})

package/src/__tests__/render.test.js

@@ -1,3 +1,4 @@
+import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
 import { beforeEach, describe, expect, test } from 'vitest'
 
 import { act, render as stlRender } from '..'
@@ -11,13 +12,13 @@ describe('render', () => {
     return stlRender(Comp, {
       target: document.body,
       props,
-      ...additional
+      ...additional,
     })
   }
 
   beforeEach(() => {
     props = {
-      name: 'World'
+      name: 'World',
     }
   })
 
@@ -41,7 +42,9 @@ describe('render', () => {
   })
 
   test('change props with accessors', async () => {
-    const { component, getByText } = render({ accessors: true })
+    const { component, getByText } = render(
+      SVELTE_VERSION < '5' ? { accessors: true } : {}
+    )
 
     expect(getByText('Hello World!')).toBeInTheDocument()
 
@@ -59,23 +62,41 @@ describe('render', () => {
     expect(getByText('Hello World!')).toBeInTheDocument()
   })
 
-  test('should accept svelte component options', () => {
-    const target = document.createElement('div')
-    const div = document.createElement('div')
-    document.body.appendChild(target)
-    target.appendChild(div)
-    const { container } = stlRender(Comp, {
-      target,
-      anchor: div,
-      props: { name: 'World' },
-      context: new Map([['name', 'context']])
-    })
-    expect(container).toMatchSnapshot()
-  })
+  test.runIf(SVELTE_VERSION < '5')(
+    'should accept svelte v4 component options',
+    () => {
+      const target = document.createElement('div')
+      const div = document.createElement('div')
+      document.body.appendChild(target)
+      target.appendChild(div)
+      const { container } = stlRender(Comp, {
+        target,
+        anchor: div,
+        props: { name: 'World' },
+        context: new Map([['name', 'context']]),
+      })
+      expect(container).toMatchSnapshot()
+    }
+  )
+
+  test.runIf(SVELTE_VERSION >= '5')(
+    'should accept svelte v5 component options',
+    () => {
+      const target = document.createElement('section')
+      document.body.appendChild(target)
+
+      const { container } = stlRender(Comp, {
+        target,
+        props: { name: 'World' },
+        context: new Map([['name', 'context']]),
+      })
+      expect(container).toMatchSnapshot()
+    }
+  )
 
   test('should throw error when mixing svelte component options and props', () => {
     expect(() => {
-      stlRender(Comp, { anchor: '', name: 'World' })
+      stlRender(Comp, { props: {}, name: 'World' })
     }).toThrow(/Unknown options were found/)
   })
 
@@ -93,10 +114,8 @@ describe('render', () => {
 
   test("accept the 'context' option", () => {
     const { getByText } = stlRender(Comp, {
-      props: {
-        name: 'Universe'
-      },
-      context: new Map([['name', 'context']])
+      props: { name: 'Universe' },
+      context: new Map([['name', 'context']]),
     })
 
     expect(getByText('we have context')).toBeInTheDocument()

package/src/__tests__/rerender.test.js

@@ -1,38 +1,41 @@
 /**
  * @jest-environment jsdom
  */
-import { describe, expect, test } from 'vitest'
+import { describe, expect, test, vi } from 'vitest'
+import { writable } from 'svelte/store'
 
-import { render } from '..'
-import Comp from './fixtures/Comp.svelte'
+import { act, render, waitFor } from '..'
+import Comp from './fixtures/Rerender.svelte'
 
-describe('rerender', () => {
-  test('mounts new component successfully', () => {
-    const { container, rerender } = render(Comp, { props: { name: 'World 1' } })
+test('mounts new component successfully', async () => {
+  const onMounted = vi.fn()
+  const onDestroyed = vi.fn()
 
-    expect(container.firstChild).toHaveTextContent('Hello World 1!')
-    rerender({ props: { name: 'World 2' } })
-    expect(container.firstChild).toHaveTextContent('Hello World 2!')
+  const { getByTestId, rerender } = render(Comp, {
+    props: { name: 'World 1', onMounted, onDestroyed },
   })
 
-  test('destroys old component', () => {
-    let isDestroyed
+  const expectToRender = (content) =>
+    waitFor(() => {
+      expect(getByTestId('test')).toHaveTextContent(content)
+      expect(onMounted).toHaveBeenCalledOnce()
+    })
 
-    const { rerender, component } = render(Comp, { props: { name: '' } })
+  await expectToRender('Hello World 1!')
 
-    component.$$.on_destroy.push(() => {
-      isDestroyed = true
-    })
-    rerender({ props: { name: '' } })
-    expect(isDestroyed).toBeTruthy()
-  })
+  console.warn = vi.fn()
 
-  test('destroys old components on multiple rerenders', () => {
-    const { rerender, queryByText } = render(Comp, { props: { name: 'Neil' } })
+  rerender({ props: { name: 'World 2' } })
+  await expectToRender('Hello World 2!')
+  expect(onDestroyed).not.toHaveBeenCalled()
 
-    rerender({ props: { name: 'Alex' } })
-    expect(queryByText('Hello Neil!')).not.toBeInTheDocument()
-    rerender({ props: { name: 'Geddy' } })
-    expect(queryByText('Hello Alex!')).not.toBeInTheDocument()
-  })
+  expect(console.warn).toHaveBeenCalledOnce()
+
+  console.warn.mockClear()
+  onDestroyed.mockReset()
+  rerender({ name: 'World 3' })
+  await expectToRender('Hello World 3!')
+  expect(onDestroyed).not.toHaveBeenCalled()
+
+  expect(console.warn).not.toHaveBeenCalled()
 })

package/src/__tests__/transition.test.js

@@ -0,0 +1,31 @@
+import { userEvent } from '@testing-library/user-event'
+import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
+
+import { render, screen, waitFor } from '..'
+import Transitioner from './fixtures/Transitioner.svelte'
+
+describe.runIf(SVELTE_VERSION < '5')('transitions', () => {
+  beforeEach(() => {
+    if (window.navigator.userAgent.includes('jsdom')) {
+      const raf = (fn) => setTimeout(() => fn(new Date()), 16)
+      vi.stubGlobal('requestAnimationFrame', raf)
+    }
+  })
+
+  test('on:introend', async () => {
+    const user = userEvent.setup()
+
+    render(Transitioner)
+    const start = screen.getByRole('button')
+    await user.click(start)
+
+    const pending = screen.getByTestId('intro-pending')
+    expect(pending).toBeInTheDocument()
+
+    await waitFor(() => {
+      const done = screen.queryByTestId('intro-done')
+      expect(done).toBeInTheDocument()
+    })
+  })
+})

package/src/pure.js

@@ -1,21 +1,17 @@
 import {
   fireEvent as dtlFireEvent,
   getQueriesForElement,
-  prettyDOM
+  prettyDOM,
 } from '@testing-library/dom'
-import { tick } from 'svelte'
+import * as Svelte from 'svelte'
 
-const containerCache = new Set()
+const IS_SVELTE_5 = typeof Svelte.createRoot === 'function'
+const targetCache = new Set()
 const componentCache = new Set()
 
-const svelteComponentOptions = [
-  'accessors',
-  'anchor',
-  'props',
-  'hydrate',
-  'intro',
-  'context'
-]
+const svelteComponentOptions = IS_SVELTE_5
+  ? ['target', 'props', 'events', 'context', 'intro', 'recover']
+  : ['accessors', 'anchor', 'props', 'hydrate', 'intro', 'context']
 
 const render = (
   Component,
@@ -24,6 +20,7 @@ const render = (
 ) => {
   container = container || document.body
   target = target || container.appendChild(document.createElement('div'))
+  targetCache.add(target)
 
   const ComponentConstructor = Component.default || Component
 
@@ -54,78 +51,87 @@ const render = (
     return { props: options }
   }
 
-  let component = new ComponentConstructor({
-    target,
-    ...checkProps(options)
-  })
+  const renderComponent = (options) => {
+    options = { target, ...checkProps(options) }
 
-  containerCache.add({ container, target, component })
-  componentCache.add(component)
+    const component = IS_SVELTE_5
+      ? Svelte.createRoot(ComponentConstructor, options)
+      : new ComponentConstructor(options)
 
-  component.$$.on_destroy.push(() => {
-    componentCache.delete(component)
-  })
+    componentCache.add(component)
+
+    // TODO(mcous, 2024-02-11): remove this behavior in the next major version
+    // It is unnecessary has no path to implementation in Svelte v5
+    if (!IS_SVELTE_5) {
+      component.$$.on_destroy.push(() => {
+        componentCache.delete(component)
+      })
+    }
+
+    return component
+  }
+
+  let component = renderComponent(options)
 
   return {
     container,
     component,
     debug: (el = container) => console.log(prettyDOM(el)),
-    rerender: (options) => {
-      if (componentCache.has(component)) component.$destroy()
-
-      // eslint-disable-next-line no-new
-      component = new ComponentConstructor({
-        target,
-        ...checkProps(options)
-      })
-
-      containerCache.add({ container, target, component })
-      componentCache.add(component)
-
-      component.$$.on_destroy.push(() => {
-        componentCache.delete(component)
-      })
+    rerender: async (props) => {
+      if (props.props) {
+        console.warn(
+          'rerender({ props: {...} }) deprecated, use rerender({...}) instead'
+        )
+        props = props.props
+      }
+      component.$set(props)
+      await Svelte.tick()
     },
     unmount: () => {
-      if (componentCache.has(component)) component.$destroy()
+      cleanupComponent(component)
     },
-    ...getQueriesForElement(container, queries)
+    ...getQueriesForElement(container, queries),
   }
 }
 
-const cleanupAtContainer = (cached) => {
-  const { target, component } = cached
+const cleanupComponent = (component) => {
+  const inCache = componentCache.delete(component)
 
-  if (componentCache.has(component)) component.$destroy()
+  if (inCache) {
+    component.$destroy()
+  }
+}
 
-  if (target.parentNode === document.body) {
+const cleanupTarget = (target) => {
+  const inCache = targetCache.delete(target)
+
+  if (inCache && target.parentNode === document.body) {
     document.body.removeChild(target)
   }
-
-  containerCache.delete(cached)
 }
 
 const cleanup = () => {
-  Array.from(containerCache.keys()).forEach(cleanupAtContainer)
+  componentCache.forEach(cleanupComponent)
+  targetCache.forEach(cleanupTarget)
 }
 
 const act = async (fn) => {
   if (fn) {
     await fn()
   }
-  return tick()
+  return Svelte.tick()
 }
 
 const fireEvent = async (...args) => {
   const event = dtlFireEvent(...args)
-  await tick()
+  await Svelte.tick()
   return event
 }
 
 Object.keys(dtlFireEvent).forEach((key) => {
   fireEvent[key] = async (...args) => {
     const event = dtlFireEvent[key](...args)
-    await tick()
+    await Svelte.tick()
     return event
   }
 })

package/types/index.d.ts

@@ -2,25 +2,42 @@
 // Project: https://github.com/testing-library/svelte-testing-library
 // Definitions by: Rahim Alwer <https://github.com/mihar-22>
 
-import {BoundFunction, EventType,Queries, queries} from '@testing-library/dom'
-import { ComponentConstructorOptions,ComponentProps, SvelteComponent  } from 'svelte'
+import {
+  BoundFunction,
+  EventType,
+  Queries,
+  queries,
+} from '@testing-library/dom'
+import {
+  ComponentConstructorOptions,
+  ComponentProps,
+  SvelteComponent,
+} from 'svelte'
 
 export * from '@testing-library/dom'
 
-type SvelteComponentOptions<C extends SvelteComponent> = ComponentProps<C> | Pick<ComponentConstructorOptions<ComponentProps<C>>, "anchor" | "props" | "hydrate" | "intro" | "context">
+type SvelteComponentOptions<C extends SvelteComponent> =
+  | ComponentProps<C>
+  | Pick<
+      ComponentConstructorOptions<ComponentProps<C>>,
+      'anchor' | 'props' | 'hydrate' | 'intro' | 'context'
+    >
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
 
-type Constructor<T> = new (...args: any[]) => T;
+type Constructor<T> = new (...args: any[]) => T
 
 /**
  * Render a Component into the Document.
  */
-export type RenderResult<C extends SvelteComponent, Q extends Queries = typeof queries> = {
+export type RenderResult<
+  C extends SvelteComponent,
+  Q extends Queries = typeof queries,
+> = {
   container: HTMLElement
   component: C
   debug: (el?: HTMLElement | DocumentFragment) => void
-  rerender: (options: SvelteComponentOptions<C>) => void
+  rerender: (props: ComponentProps<C>) => Promise<void>
   unmount: () => void
 } & { [P in keyof Q]: BoundFunction<Q[P]> }
 
@@ -38,7 +55,7 @@ export function render<C extends SvelteComponent>(
 export function render<C extends SvelteComponent, Q extends Queries>(
   component: Constructor<C>,
   componentOptions?: SvelteComponentOptions<C>,
-  renderOptions?: RenderOptions<Q>,
+  renderOptions?: RenderOptions<Q>
 ): RenderResult<C, Q>
 
 /**
@@ -50,13 +67,19 @@ export function cleanup(): void
  * Fires DOM events on an element provided by @testing-library/dom. Since Svelte needs to flush
  * pending state changes via `tick`, these methods have been override and now return a promise.
  */
-export type FireFunction = (element: Document | Element | Window, event: Event) => Promise<boolean>;
+export type FireFunction = (
+  element: Document | Element | Window,
+  event: Event
+) => Promise<boolean>
 
 export type FireObject = {
-  [K in EventType]: (element: Document | Element | Window, options?: {}) => Promise<boolean>;
-};
+  [K in EventType]: (
+    element: Document | Element | Window,
+    options?: {}
+  ) => Promise<boolean>
+}
 
-export const fireEvent: FireFunction & FireObject;
+export const fireEvent: FireFunction & FireObject
 
 /**
  * Calls a function and notifies Svelte to flush any pending state changes.

package/src/__tests__/fixtures/Stopwatch.svelte

@@ -1,40 +0,0 @@
-<script>
-  import { onDestroy } from 'svelte'
-
-  let timer
-  let lapse = 0
-  let running = false
-
-  function handleRunClick () {
-    if (running) {
-      clearInterval(timer)
-    } else {
-      const startTime = Date.now() - lapse
-
-      timer = setInterval(() => {
-        lapse = Date.now() - startTime
-      }, 1)
-    }
-    running = true
-  }
-
-  function handleClearClick () {
-    clearInterval(timer)
-    lapse = 0
-    running = false
-  }
-
-  onDestroy(() => {
-    clearInterval(timer)
-  })
-</script>
-
-<style></style>
-
-<span>{lapse}ms</span>
-
-<button on:click={handleRunClick}>
-  {running ? 'Stop' : 'Start'}
-</button>
-
-<button on:click={handleClearClick}>Clear</button>

package/src/__tests__/unmount.test.js

@@ -1,35 +0,0 @@
-import { describe, expect, test, vi } from 'vitest'
-
-import { act, fireEvent, render } from '..'
-import Stopwatch from './fixtures/Stopwatch.svelte'
-
-describe('unmount', () => {
-  test('unmounts component successfully', async () => {
-    console.warn = vi.fn()
-
-    const { unmount, getByText, container } = render(Stopwatch)
-
-    await fireEvent.click(getByText('Start'))
-
-    unmount()
-
-    // Hey there reader! You don't need to have an assertion like this one
-    // this is just me making sure that the unmount function works.
-    // You don't need to do this in your apps. Just rely on the fact that this works.
-    expect(container.innerHTML).toBe('<div></div>')
-
-    await act()
-    expect(console.warn).not.toHaveBeenCalled()
-  })
-
-  test('destroying component directly and calling unmount does not log warning', async () => {
-    console.warn = vi.fn()
-
-    const { unmount, component } = render(Stopwatch)
-
-    component.$destroy()
-    unmount()
-
-    expect(console.warn).not.toHaveBeenCalled()
-  })
-})