@testing-library/svelte 5.2.0 → 5.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testing-library/svelte",
-  "version": "5.2.0",
+  "version": "5.2.2",
   "description": "Simple and complete Svelte testing utilities that encourage good testing practices.",
   "main": "src/index.js",
   "exports": {
@@ -53,6 +53,7 @@
     "!__tests__"
   ],
   "scripts": {
+    "all": "npm-run-all contributors:generate toc format types build test:vitest:* test:jest",
     "toc": "doctoc README.md",
     "lint": "prettier . --check && eslint .",
     "lint:delta": "npm-run-all -p prettier:delta eslint:delta",
@@ -62,13 +63,14 @@
     "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",
+    "setup": "npm install && npm run all",
     "test": "vitest run --coverage",
     "test:watch": "vitest",
     "test:vitest:jsdom": "vitest run --coverage --environment jsdom",
     "test:vitest:happy-dom": "vitest run --coverage --environment happy-dom",
     "test:jest": "npx --node-options=\"--experimental-vm-modules --no-warnings\" jest --coverage",
     "types": "svelte-check",
+    "types:legacy": "svelte-check --tsconfig tsconfig.legacy.json",
     "validate": "npm-run-all test:vitest:* test:jest types build",
     "build": "tsc -p tsconfig.build.json",
     "contributors:add": "all-contributors add",
@@ -96,34 +98,32 @@
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/user-event": "^14.5.2",
-    "@typescript-eslint/eslint-plugin": "7.8.0",
-    "@typescript-eslint/parser": "7.8.0",
-    "@vitest/coverage-v8": "^1.5.2",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "@vitest/coverage-v8": "^2.0.2",
     "all-contributors-cli": "^6.26.1",
     "doctoc": "^2.2.1",
-    "eslint": "8.57.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": "12.1.0",
-    "eslint-plugin-svelte": "2.38.0",
-    "eslint-plugin-vitest-globals": "1.5.0",
-    "expect-type": "^0.19.0",
-    "happy-dom": "^14.7.1",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-promise": "^6.4.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-svelte": "^2.42.0",
+    "expect-type": "^0.20.0",
+    "happy-dom": "^15.7.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jsdom": "^24.0.0",
+    "jsdom": "^25.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "3.2.5",
-    "prettier-plugin-svelte": "3.2.3",
+    "prettier": "^3.3.3",
+    "prettier-plugin-svelte": "^3.2.5",
     "svelte": "^3 || ^4 || ^5 || ^5.0.0-next.0",
-    "svelte-check": "^3.6.3",
+    "svelte-check": "^3.8.4",
     "svelte-jester": "^5.0.0",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.1",
-    "vitest": "^1.5.2"
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3",
+    "vitest": "^2.0.2"
   }
 }

package/src/component-types.d.ts

@@ -0,0 +1,43 @@
+import type * as Svelte from 'svelte'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type IS_MODERN_SVELTE = any extends Svelte.Component ? false : true
+
+/** A compiled, imported Svelte component. */
+export type Component<P> = IS_MODERN_SVELTE extends true
+  ? Svelte.Component<P> | Svelte.SvelteComponent<P>
+  : Svelte.SvelteComponent<P>
+
+/**
+ * The type of an imported, compiled Svelte component.
+ *
+ * In Svelte 4, this was the Svelte component class' type.
+ * In Svelte 5, this distinction no longer matters.
+ */
+export type ComponentType<C> = C extends Svelte.SvelteComponent
+  ? Svelte.ComponentType<C>
+  : C
+
+/** The props of a component. */
+export type Props<C> = Svelte.ComponentProps<C>
+
+/**
+ * The exported fields of a component.
+ *
+ * In Svelte 4, this is simply the instance of the component class.
+ * In Svelte 5, this is the set of variables marked as `export`'d.
+ */
+export type Exports<C> = C extends Svelte.SvelteComponent
+  ? C
+  : C extends Svelte.Component<unknown, infer E>
+    ? E
+    : never
+
+/**
+ * Options that may be passed to `mount` when rendering the component.
+ *
+ * In Svelte 4, these are the options passed to the component constructor.
+ */
+export type MountOptions<C> = IS_MODERN_SVELTE extends true
+  ? Parameters<typeof Svelte.mount<Props<C>, Exports<C>>>[1]
+  : Svelte.ComponentConstructorOptions<Props<C>>

package/src/core/modern.svelte.js

@@ -26,6 +26,7 @@ const mount = (Component, options) => {
   const props = $state(options.props ?? {})
   const component = Svelte.mount(Component, { ...options, props })
 
+  Svelte.flushSync()
   propsByComponent.set(component, props)
 
   return component
@@ -34,7 +35,7 @@ const mount = (Component, options) => {
 /** Remove the component from the DOM. */
 const unmount = (component) => {
   propsByComponent.delete(component)
-  Svelte.unmount(component)
+  Svelte.flushSync(() => Svelte.unmount(component))
 }
 
 /**

package/src/pure.js

@@ -13,8 +13,8 @@ const componentCache = new Set()
 /**
  * Customize how Svelte renders the component.
  *
- * @template {import('svelte').SvelteComponent} C
- * @typedef {import('svelte').ComponentProps<C> | Partial<import('svelte').ComponentConstructorOptions<import('svelte').ComponentProps<C>>>} SvelteComponentOptions
+ * @template {import('./component-types.js').Component} C
+ * @typedef {import('./component-types.js').Props<C> | Partial<import('./component-types.js').MountOptions<C>>} SvelteComponentOptions
  */
 
 /**
@@ -30,15 +30,15 @@ const componentCache = new Set()
 /**
  * The rendered component and bound testing functions.
  *
- * @template {import('svelte').SvelteComponent} C
+ * @template {import('./component-types.js').Component} C
  * @template {import('@testing-library/dom').Queries} [Q=typeof import('@testing-library/dom').queries]
  *
  * @typedef {{
  *   container: HTMLElement
  *   baseElement: HTMLElement
- *   component: C
+ *   component: import('./component-types.js').Exports<C>
  *   debug: (el?: HTMLElement | DocumentFragment) => void
- *   rerender: (props: Partial<import('svelte').ComponentProps<C>>) => Promise<void>
+ *   rerender: (props: Partial<import('./component-types.js').Props<C>>) => Promise<void>
  *   unmount: () => void
  * } & {
  *   [P in keyof Q]: import('@testing-library/dom').BoundFunction<Q[P]>
@@ -48,10 +48,10 @@ const componentCache = new Set()
 /**
  * Render a component into the document.
  *
- * @template {import('svelte').SvelteComponent} C
+ * @template {import('./component-types.js').Component} C
  * @template {import('@testing-library/dom').Queries} [Q=typeof import('@testing-library/dom').queries]
  *
- * @param {import('svelte').ComponentType<C>} Component - The component to render.
+ * @param {import('./component-types.js').ComponentType<C>} Component - The component to render.
  * @param {SvelteComponentOptions<C>} options - Customize how Svelte renders the component.
  * @param {RenderOptions<Q>} renderOptions - Customize how Testing Library sets up the document and binds queries.
  * @returns {RenderResult<C, Q>} The rendered component and bound testing functions.

package/types/core/modern.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modern.svelte.d.ts","sourceRoot":"","sources":["../../src/core/modern.svelte.js"],"names":[],"mappings":"AAaA,2CAA2C;AAC3C,sCAOC;AAXD,uCAAuC;AACvC,uCAA2D;AAY3D,wCAAwC;AACxC,yDAOC;AAED,yCAAyC;AACzC,8CAGC;AAED;;;;GAIG;AACH,kEAGC"}
+{"version":3,"file":"modern.svelte.d.ts","sourceRoot":"","sources":["../../src/core/modern.svelte.js"],"names":[],"mappings":"AAaA,2CAA2C;AAC3C,sCAOC;AAXD,uCAAuC;AACvC,uCAA2D;AAY3D,wCAAwC;AACxC,yDAQC;AAED,yCAAyC;AACzC,8CAGC;AAED;;;;GAIG;AACH,kEAGC"}

package/types/pure.d.ts

@@ -1,7 +1,7 @@
 /**
  * Customize how Svelte renders the component.
  */
-export type SvelteComponentOptions<C extends import("svelte").SvelteComponent> = import("svelte").ComponentProps<C> | Partial<import("svelte").ComponentConstructorOptions<import("svelte").ComponentProps<C>>>;
+export type SvelteComponentOptions<C extends any> = import("./component-types.js").Props<C> | Partial<import("./component-types.js").MountOptions<C>>;
 /**
  * Customize how Testing Library sets up the document and binds queries.
  */
@@ -12,12 +12,12 @@ export type RenderOptions<Q extends import("@testing-library/dom").Queries = typ
 /**
  * The rendered component and bound testing functions.
  */
-export type RenderResult<C extends import("svelte").SvelteComponent, Q extends import("@testing-library/dom").Queries = typeof import("@testing-library/dom/types/queries.js")> = {
+export type RenderResult<C extends any, Q extends import("@testing-library/dom").Queries = typeof import("@testing-library/dom/types/queries.js")> = {
     container: HTMLElement;
     baseElement: HTMLElement;
-    component: C;
+    component: import("./component-types.js").Exports<C>;
     debug: (el?: HTMLElement | DocumentFragment) => void;
-    rerender: (props: Partial<import("svelte").ComponentProps<C>>) => Promise<void>;
+    rerender: (props: Partial<import("./component-types.js").Props<C>>) => Promise<void>;
     unmount: () => void;
 } & { [P in keyof Q]: import("@testing-library/dom").BoundFunction<Q[P]>; };
 export type FireFunction = (...args: Parameters<import("@testing-library/dom").FireFunction>) => Promise<ReturnType<import("@testing-library/dom").FireFunction>>;
@@ -51,8 +51,8 @@ export const fireEvent: FireFunction & FireObject;
 /**
  * Customize how Svelte renders the component.
  *
- * @template {import('svelte').SvelteComponent} C
- * @typedef {import('svelte').ComponentProps<C> | Partial<import('svelte').ComponentConstructorOptions<import('svelte').ComponentProps<C>>>} SvelteComponentOptions
+ * @template {import('./component-types.js').Component} C
+ * @typedef {import('./component-types.js').Props<C> | Partial<import('./component-types.js').MountOptions<C>>} SvelteComponentOptions
  */
 /**
  * Customize how Testing Library sets up the document and binds queries.
@@ -66,15 +66,15 @@ export const fireEvent: FireFunction & FireObject;
 /**
  * The rendered component and bound testing functions.
  *
- * @template {import('svelte').SvelteComponent} C
+ * @template {import('./component-types.js').Component} C
  * @template {import('@testing-library/dom').Queries} [Q=typeof import('@testing-library/dom').queries]
  *
  * @typedef {{
  *   container: HTMLElement
  *   baseElement: HTMLElement
- *   component: C
+ *   component: import('./component-types.js').Exports<C>
  *   debug: (el?: HTMLElement | DocumentFragment) => void
- *   rerender: (props: Partial<import('svelte').ComponentProps<C>>) => Promise<void>
+ *   rerender: (props: Partial<import('./component-types.js').Props<C>>) => Promise<void>
  *   unmount: () => void
  * } & {
  *   [P in keyof Q]: import('@testing-library/dom').BoundFunction<Q[P]>
@@ -83,13 +83,13 @@ export const fireEvent: FireFunction & FireObject;
 /**
  * Render a component into the document.
  *
- * @template {import('svelte').SvelteComponent} C
+ * @template {import('./component-types.js').Component} C
  * @template {import('@testing-library/dom').Queries} [Q=typeof import('@testing-library/dom').queries]
  *
- * @param {import('svelte').ComponentType<C>} Component - The component to render.
+ * @param {import('./component-types.js').ComponentType<C>} Component - The component to render.
  * @param {SvelteComponentOptions<C>} options - Customize how Svelte renders the component.
  * @param {RenderOptions<Q>} renderOptions - Customize how Testing Library sets up the document and binds queries.
  * @returns {RenderResult<C, Q>} The rendered component and bound testing functions.
  */
-export function render<C extends import("svelte").SvelteComponent, Q extends import("@testing-library/dom").Queries = typeof import("@testing-library/dom/types/queries.js")>(Component: import("svelte").ComponentType<C>, options?: SvelteComponentOptions<C>, renderOptions?: RenderOptions<Q>): RenderResult<C, Q>;
+export function render<C extends any, Q extends import("@testing-library/dom").Queries = typeof import("@testing-library/dom/types/queries.js")>(Component: import("./component-types.js").ComponentType<C>, options?: SvelteComponentOptions<C>, renderOptions?: RenderOptions<Q>): RenderResult<C, Q>;
 //# sourceMappingURL=pure.d.ts.map

package/types/pure.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pure.d.ts","sourceRoot":"","sources":["../src/pure.js"],"names":[],"mappings":";;;mCAegD,CAAC,SAApC,OAAQ,QAAQ,EAAE,eAAgB,IAClC,OAAO,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,OAAO,QAAQ,EAAE,2BAA2B,CAAC,OAAO,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;;;;0BAMpF,CAAC,SAA3C,OAAQ,sBAAsB,EAAE,OAAQ,6DACxC;IACZ,WAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,OAAW,CAAC,EAAE,CAAC,CAAA;CACZ;;;;yBAM4C,CAAC,SAApC,OAAQ,QAAQ,EAAE,eAAgB,EACQ,CAAC,SAA3C,OAAQ,sBAAsB,EAAE,OAAQ,6DAExC;IACZ,SAAa,EAAE,WAAW,CAAA;IAC1B,WAAe,EAAE,WAAW,CAAA;IAC5B,SAAa,EAAE,CAAC,CAAA;IAChB,KAAS,EAAE,CAAC,EAAE,CAAC,EAAE,WAAW,GAAG,gBAAgB,KAAK,IAAI,CAAA;IACxD,QAAY,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,OAAO,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACnF,OAAW,EAAE,MAAM,IAAI,CAAA;CACpB,GAAG,GACD,CAAY,IAAP,MAAM,CAAC,GAAG,OAAO,sBAAsB,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GACnE;2BAkGS,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,sBAAsB,EAAE,YAAY,CAAC,KAAK,OAAO,CAAC,UAAU,CAAC,OAAO,sBAAsB,EAAE,YAAY,CAAC,CAAC;yBAItI,GACP,CAA6C,IAAxC,OAAO,sBAAsB,EAAE,SAAS,GAAG,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,sBAAsB,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,UAAU,CAAC,OAAO,sBAAsB,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,GAC1L;AApBJ;;;;;GAKG;AACH,gCAHiB,OAAO,gBACX,OAAO,CAAC,IAAI,CAAC,CAOzB;AAjBD,oEAAoE;AACpE,gCAGC;AAeD;;GAEG;AAEH;;;;GAIG;AAEH;;;;;;;GAOG;AACH,wBAFU,YAAY,GAAG,UAAU,CAMlC;AAvJD;;;;;GAKG;AAEH;;;;;;;;GAQG;AAEH;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;;;;;;GAUG;AACH,uBARgD,CAAC,SAApC,OAAQ,QAAQ,EAAE,eAAgB,EACQ,CAAC,SAA3C,OAAQ,sBAAsB,EAAE,OAAQ,sEAE1C,OAAO,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,YACjC,sBAAsB,CAAC,CAAC,CAAC,kBACzB,aAAa,CAAC,CAAC,CAAC,GACd,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,CA8C9B"}
+{"version":3,"file":"pure.d.ts","sourceRoot":"","sources":["../src/pure.js"],"names":[],"mappings":";;;mCAewD,CAAC,SAA5C,GAA0C,IAC1C,OAAO,sBAAsB,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,OAAO,sBAAsB,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;;;;0BAMvD,CAAC,SAA3C,OAAQ,sBAAsB,EAAE,OAAQ,6DACxC;IACR,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,OAAO,CAAC,EAAE,CAAC,CAAA;CACZ;;;;yBAMoD,CAAC,SAA5C,GAA0C,EACA,CAAC,SAA3C,OAAQ,sBAAsB,EAAE,OAAQ,6DAExC;IACR,SAAS,EAAE,WAAW,CAAA;IACtB,WAAW,EAAE,WAAW,CAAA;IACxB,SAAS,EAAE,OAAO,sBAAsB,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACpD,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,WAAW,GAAG,gBAAgB,KAAK,IAAI,CAAA;IACpD,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,OAAO,sBAAsB,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACpF,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,GAAG,GACD,CAAY,IAAP,MAAM,CAAC,GAAG,OAAO,sBAAsB,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GACnE;2BAkGS,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,sBAAsB,EAAE,YAAY,CAAC,KAAK,OAAO,CAAC,UAAU,CAAC,OAAO,sBAAsB,EAAE,YAAY,CAAC,CAAC;yBAItI,GACP,CAA6C,IAAxC,OAAO,sBAAsB,EAAE,SAAS,GAAG,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,OAAO,sBAAsB,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,UAAU,CAAC,OAAO,sBAAsB,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,GAC1L;AApBJ;;;;;GAKG;AACH,gCAHiB,OAAO,gBACX,OAAO,CAAC,IAAI,CAAC,CAOzB;AAjBD,oEAAoE;AACpE,gCAGC;AAeD;;GAEG;AAEH;;;;GAIG;AAEH;;;;;;;GAOG;AACH,wBAFU,YAAY,GAAG,UAAU,CAMlC;AAvJD;;;;;GAKG;AAEH;;;;;;;;GAQG;AAEH;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;;;;;;GAUG;AACH,uBARwD,CAAC,SAA5C,GAA0C,EACA,CAAC,SAA3C,OAAQ,sBAAsB,EAAE,OAAQ,sEAE1C,OAAO,sBAAsB,EAAE,aAAa,CAAC,CAAC,CAAC,YAC/C,sBAAsB,CAAC,CAAC,CAAC,kBACzB,aAAa,CAAC,CAAC,CAAC,GACd,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,CA8C9B"}