@testing-library/svelte - npm Package Compare versions

Comparing version 4.1.0 to 4.2.0

package.json

 {
   "name": "@testing-library/svelte",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Simple and complete Svelte testing utilities that encourage good testing practices.",
@@ -47,9 +47,18 @@ "main": "src/index.js",
     "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",
@@ -59,3 +68,3 @@ "contributors:generate": "all-contributors generate"
   "peerDependencies": {
-    "svelte": "^3 || ^4"
+    "svelte": "^3 || ^4 || ^5"
   },
@@ -66,54 +75,33 @@ "dependencies": {
   "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"
-    ]
   }
 }

README.md

@@ -41,3 +41,2 @@ <div align="center">
 
-
 - [The Problem](#the-problem)
@@ -123,19 +122,25 @@ - [This Solution](#this-solution)
 <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>
@@ -159,4 +164,4 @@
 [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
@@ -170,3 +175,3 @@ [coverage]: https://codecov.io/github/testing-library/svelte-testing-library
 [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
@@ -194,2 +199,1 @@ [prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
 <!-- prettier-ignore-end -->
-

src/__tests__/render.test.js

@@ -0,1 +1,2 @@
+import { VERSION as SVELTE_VERSION } from 'svelte/compiler'
 import { beforeEach, describe, expect, test } from 'vitest'
@@ -14,3 +15,3 @@
       props,
-      ...additional
+      ...additional,
     })
@@ -21,3 +22,3 @@ }
     props = {
-      name: 'World'
+      name: 'World',
     }
@@ -46,3 +47,5 @@ })
   test('change props with accessors', async () => {
-    const { component, getByText } = render({ accessors: true })
+    const { component, getByText } = render(
+      SVELTE_VERSION < '5' ? { accessors: true } : {}
+    )
 
@@ -65,19 +68,37 @@ 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/)
@@ -100,6 +121,4 @@ })
     const { getByText } = stlRender(Comp, {
-      props: {
-        name: 'Universe'
-      },
-      context: new Map([['name', 'context']])
+      props: { name: 'Universe' },
+      context: new Map([['name', 'context']]),
     })
@@ -106,0 +125,0 @@

src/__tests__/rerender.test.js

 /**
  * @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()
 })

src/pure.js

 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']
 
@@ -27,2 +23,3 @@ const render = (
   target = target || container.appendChild(document.createElement('div'))
+  targetCache.add(target)
 
@@ -58,14 +55,24 @@ const ComponentConstructor = Component.default || Component
 
-  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 {
@@ -75,39 +82,38 @@ container,
     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)
 }
@@ -119,3 +125,3 @@
   }
-  return tick()
+  return Svelte.tick()
 }
@@ -125,3 +131,3 @@
   const event = dtlFireEvent(...args)
-  await tick()
+  await Svelte.tick()
   return event
@@ -133,3 +139,3 @@ }
     const event = dtlFireEvent[key](...args)
-    await tick()
+    await Svelte.tick()
     return event
@@ -136,0 +142,0 @@ }

types/index.d.ts

@@ -5,12 +5,26 @@ // Type definitions for Svelte Testing Library
 
-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
 
@@ -20,7 +34,10 @@ /**
  */
-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
@@ -43,3 +60,3 @@ } & { [P in keyof Q]: BoundFunction<Q[P]> }
   componentOptions?: SvelteComponentOptions<C>,
-  renderOptions?: RenderOptions<Q>,
+  renderOptions?: RenderOptions<Q>
 ): RenderResult<C, Q>
@@ -56,9 +73,15 @@
  */
-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
 
@@ -65,0 +88,0 @@ /**

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

40579

increased by12.85%

Number of package files

29

increased by20.83%

Lines of code

589

increased by19.96%

Number of lines in readme file

195

increased by2.09%

Worsened metrics

Dev dependency count

30

increased by3.45%

No dependency changes