@testing-library/svelte - npm Package Compare versions

Comparing version 5.2.0-next.1 to 5.2.0-next.2

package.json

 {
   "name": "@testing-library/svelte",
-  "version": "5.2.0-next.1",
+  "version": "5.2.0-next.2",
   "description": "Simple and complete Svelte testing utilities that encourage good testing practices.",
@@ -16,2 +16,3 @@ "main": "src/index.js",
     "./vitest": {
+      "types": "./types/vitest.d.ts",
       "default": "./src/vitest.js"
@@ -30,3 +31,3 @@ },
     "type": "git",
-    "url": "https://github.com/testing-library/svelte-testing-library"
+    "url": "git+https://github.com/testing-library/svelte-testing-library.git"
   },
@@ -54,3 +55,2 @@ "bugs": {
     "types",
-    "!*.test-d.ts",
     "!__tests__"
@@ -75,3 +75,4 @@ ],
     "types": "svelte-check",
-    "validate": "npm-run-all test:vitest:* test:jest types",
+    "validate": "npm-run-all test:vitest:* test:jest types build",
+    "build": "tsc -p tsconfig.build.json",
     "contributors:add": "all-contributors add",
@@ -78,0 +79,0 @@ "contributors:generate": "all-contributors generate",

README.md

@@ -15,4 +15,3 @@ <div align="center">
 
-[**Read The Docs**](https://testing-library.com/docs/svelte-testing-library/intro) |
-[Edit the docs](https://github.com/testing-library/testing-library-docs)
+[**Read The Docs**][stl-docs] | [Edit the docs][stl-docs-repo]
 
@@ -22,7 +21,9 @@ <!-- prettier-ignore-start -->
 [![Code Coverage][coverage-badge]][coverage]
-[![version][version-badge]][package] [![downloads][downloads-badge]][npmtrends]
+[![version][version-badge]][package]
+[![downloads][downloads-badge]][downloads]
 [![MIT License][license-badge]][license]
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-8-orange.svg?style=flat-square)](#contributors-)
-[![PRs Welcome][prs-badge]][prs] [![Code of Conduct][coc-badge]][coc]
+[![All Contributors][contributors-badge]][contributors]
+[![PRs Welcome][prs-badge]][prs]
+[![Code of Conduct][coc-badge]][coc]
 [![Discord][discord-badge]][discord]
@@ -38,2 +39,29 @@
 
+[stl-docs]: https://testing-library.com/docs/svelte-testing-library/intro
+[stl-docs-repo]: https://github.com/testing-library/testing-library-docs
+[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
+[package]: https://www.npmjs.com/package/@testing-library/svelte
+[downloads-badge]: https://img.shields.io/npm/dm/@testing-library/svelte.svg?style=flat-square
+[downloads]: http://www.npmtrends.com/@testing-library/svelte
+[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
+[contributors-badge]: https://img.shields.io/badge/all_contributors-8-orange.svg?style=flat-square
+[contributors]: #contributors
+[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
+[prs]: http://makeapullrequest.com
+[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
+[coc]: https://github.com/testing-library/svelte-testing-library/blob/main/CODE_OF_CONDUCT.md
+[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
+[github-watch-badge]: https://img.shields.io/github/watchers/testing-library/svelte-testing-library.svg?style=social
+[github-watch]: https://github.com/testing-library/svelte-testing-library/watchers
+[github-star-badge]: https://img.shields.io/github/stars/testing-library/svelte-testing-library.svg?style=social
+[github-star]: https://github.com/testing-library/svelte-testing-library/stargazers
+[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20svelte-testing-library%20by%20%40@TestingLib%20https%3A%2F%2Fgithub.com%2Ftesting-library%2Fsvelte-testing-library%20%F0%9F%91%8D
+[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/testing-library/svelte-testing-library.svg?style=social
+
 ## Table of Contents
@@ -47,2 +75,3 @@
 - [Installation](#installation)
+- [Setup](#setup)
 - [Docs](#docs)
@@ -54,3 +83,2 @@ - [Issues](#issues)
 - [Contributors](#contributors)
-- [LICENSE](#license)
 
@@ -61,11 +89,12 @@ <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
-You want to write tests for your Svelte components so that they avoid including implementation
-details, and are maintainable in the long run.
+You want to write maintainable tests for your [Svelte][svelte] components.
 
+[svelte]: https://svelte.dev/
+
 ## This Solution
 
-The `svelte-testing-library` is a very lightweight solution for testing Svelte
-components. It provides light utility functions on top of `svelte` and
-`dom-testing-library`, in a way that encourages better testing practices. Its
-primary guiding principle is:
+`@testing-library/svelte` is a lightweight library for testing Svelte
+components. It provides functions on top of `svelte` and
+`@testing-library/dom` so you can mount Svelte components and query their
+rendered output in the DOM. Its primary guiding principle is:
 
@@ -75,2 +104,4 @@ > [The more your tests resemble the way your software is used, the more
 
+[guiding-principle]: https://twitter.com/kentcdodds/status/977018512689455106
+
 ## Installation
@@ -87,8 +118,14 @@
 
-You may also be interested in installing `@testing-library/jest-dom` so you can use
-[the custom jest matchers](https://github.com/testing-library/jest-dom).
+You may also be interested in installing `@testing-library/jest-dom` so you can
+use [the custom jest matchers][jest-dom].
 
+[npm]: https://www.npmjs.com/
+[node]: https://nodejs.org
+[jest-dom]: https://github.com/testing-library/jest-dom
+
 ## Setup
 
-We recommend using `@testing-library/svelte` with [Vitest][] as your test runner. To get started, add the `svelteTesting` plugin to your Vite or Vitest config.
+We recommend using `@testing-library/svelte` with [Vitest][] as your test
+runner. To get started, add the `svelteTesting` plugin to your Vite or Vitest
+config.
 
@@ -108,3 +145,4 @@ ```diff
 
-See the [setup docs][] for more detailed setup instructions, including for other test runners like Jest.
+See the [setup docs][] for more detailed setup instructions, including for other
+test runners like Jest.
 
@@ -116,3 +154,3 @@ [vitest]: https://vitest.dev/
 
-See the [**docs**](https://testing-library.com/docs/svelte-testing-library/intro) over at the Testing Library website.
+See the [**docs**][stl-docs] over at the Testing Library website.
 
@@ -124,2 +162,4 @@ ## Issues
 
+[good-first-issue]: https://github.com/testing-library/svelte-testing-library/issues?utf8=✓&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3A"good+first+issue"+
+
 ### 🐛 Bugs
@@ -131,2 +171,4 @@
 
+[bugs]: https://github.com/testing-library/svelte-testing-library/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc
+
 ### 💡 Feature Requests
@@ -139,2 +181,4 @@
 
+[requests]: https://github.com/testing-library/svelte-testing-library/issues?q=is%3Aissue+sort%3Areactions-%2B1-desc+label%3Aenhancement+is%3Aopen
+
 ### ❓ Questions
@@ -148,2 +192,4 @@
 
+[stackoverflow]: https://stackoverflow.com/questions/tagged/svelte-testing-library
+
 ## Contributors
@@ -190,42 +236,3 @@
 
-## LICENSE
-
-[MIT](LICENSE)
-
-<!-- prettier-ignore-start -->
-
-[npm]: https://www.npmjs.com/
-[node]: https://nodejs.org
-[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
-[package]: https://www.npmjs.com/package/@testing-library/svelte
-[downloads-badge]: https://img.shields.io/npm/dm/@testing-library/svelte.svg?style=flat-square
-[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&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
-[donate-badge]: https://img.shields.io/badge/$-support-green.svg?style=flat-square
-[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
-[coc]: https://github.com/testing-library/svelte-testing-library/blob/main/CODE_OF_CONDUCT.md
-[github-watch-badge]: https://img.shields.io/github/watchers/testing-library/svelte-testing-library.svg?style=social
-[github-watch]: https://github.com/testing-library/svelte-testing-library/watchers
-[github-star-badge]: https://img.shields.io/github/stars/testing-library/svelte-testing-library.svg?style=social
-[github-star]: https://github.com/testing-library/svelte-testing-library/stargazers
-[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20svelte-testing-library%20by%20%40@TestingLib%20https%3A%2F%2Fgithub.com%2Ftesting-library%2Fsvelte-testing-library%20%F0%9F%91%8D
-[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/testing-library/svelte-testing-library.svg?style=social
 [emojis]: https://github.com/all-contributors/all-contributors#emoji-key
 [all-contributors]: https://github.com/all-contributors/all-contributors
-[set-immediate]: https://developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate
-[guiding-principle]: https://twitter.com/kentcdodds/status/977018512689455106
-[bugs]: https://github.com/testing-library/svelte-testing-library/issues?q=is%3Aissue+is%3Aopen+label%3Abug+sort%3Acreated-desc
-[requests]: https://github.com/testing-library/svelte-testing-library/issues?q=is%3Aissue+sort%3Areactions-%2B1-desc+label%3Aenhancement+is%3Aopen
-[good-first-issue]: https://github.com/testing-library/svelte-testing-library/issues?utf8=✓&q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc+label%3A"good+first+issue"+
-[stackoverflow]: https://stackoverflow.com/questions/tagged/svelte-testing-library
-
-<!-- prettier-ignore-end -->

src/index.js

@@ -19,9 +19,5 @@ /* eslint-disable import/export */
 // export svelte-specific functions and custom `fireEvent`
-// `fireEvent` must be a named export to take priority over wildcard export above
-export {
-  act,
-  cleanup,
-  fireEvent,
-  render,
-  UnknownSvelteOptionsError,
-} from './pure.js'
+export { UnknownSvelteOptionsError } from './core/index.js'
+export * from './pure.js'
+// `fireEvent` must be named to take priority over wildcard from @testing-library/dom
+export { fireEvent } from './pure.js'

src/pure.js

 import {
-  fireEvent as dtlFireEvent,
+  fireEvent as baseFireEvent,
   getQueriesForElement,
@@ -8,9 +8,3 @@ prettyDOM,
 
-import {
-  mount,
-  UnknownSvelteOptionsError,
-  unmount,
-  updateProps,
-  validateOptions,
-} from './core/index.js'
+import { mount, unmount, updateProps, validateOptions } from './core/index.js'
 
@@ -20,2 +14,48 @@ const targetCache = 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
+ */
+
+/**
+ * Customize how Testing Library sets up the document and binds queries.
+ *
+ * @template {import('@testing-library/dom').Queries} [Q=typeof import('@testing-library/dom').queries]
+ * @typedef {{
+ *   baseElement?: HTMLElement
+ *   queries?: Q
+ * }} RenderOptions
+ */
+
+/**
+ * The rendered component and bound testing functions.
+ *
+ * @template {import('svelte').SvelteComponent} C
+ * @template {import('@testing-library/dom').Queries} [Q=typeof import('@testing-library/dom').queries]
+ *
+ * @typedef {{
+ *   container: HTMLElement
+ *   baseElement: HTMLElement
+ *   component: C
+ *   debug: (el?: HTMLElement | DocumentFragment) => void
+ *   rerender: (props: Partial<import('svelte').ComponentProps<C>>) => Promise<void>
+ *   unmount: () => void
+ * } & {
+ *   [P in keyof Q]: import('@testing-library/dom').BoundFunction<Q[P]>
+ * }} RenderResult
+ */
+
+/**
+ * Render a component into the document.
+ *
+ * @template {import('svelte').SvelteComponent} 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 {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.
+ */
 const render = (Component, options = {}, renderOptions = {}) => {
@@ -67,2 +107,3 @@ options = validateOptions(options)
 
+/** Remove a component from the component cache. */
 const cleanupComponent = (component) => {
@@ -76,2 +117,3 @@ const inCache = componentCache.delete(component)
 
+/** Remove a target element from the target cache. */
 const cleanupTarget = (target) => {
@@ -85,2 +127,3 @@ const inCache = targetCache.delete(target)
 
+/** Unmount all components and remove elements added to `<body>`. */
 const cleanup = () => {
@@ -91,2 +134,8 @@ componentCache.forEach(cleanupComponent)
 
+/**
+ * Call a function and wait for Svelte to flush pending changes.
+ *
+ * @param {() => unknown} [fn] - A function, which may be `async`, to call before flushing updates.
+ * @returns {Promise<void>}
+ */
 const act = async (fn) => {
@@ -99,4 +148,22 @@ if (fn) {
 
+/**
+ * @typedef {(...args: Parameters<import('@testing-library/dom').FireFunction>) => Promise<ReturnType<import('@testing-library/dom').FireFunction>>} FireFunction
+ */
+
+/**
+ * @typedef {{
+ *   [K in import('@testing-library/dom').EventType]: (...args: Parameters<import('@testing-library/dom').FireObject[K]>) => Promise<ReturnType<import('@testing-library/dom').FireObject[K]>>
+ * }} FireObject
+ */
+
+/**
+ * Fire an event on an element.
+ *
+ * Consider using `@testing-library/user-event` instead, if possible.
+ * @see https://testing-library.com/docs/user-event/intro/
+ *
+ * @type {FireFunction & FireObject}
+ */
 const fireEvent = async (...args) => {
-  const event = dtlFireEvent(...args)
+  const event = baseFireEvent(...args)
   await tick()
@@ -106,5 +173,5 @@ return event
 
-Object.keys(dtlFireEvent).forEach((key) => {
+Object.keys(baseFireEvent).forEach((key) => {
   fireEvent[key] = async (...args) => {
-    const event = dtlFireEvent[key](...args)
+    const event = baseFireEvent[key](...args)
     await tick()
@@ -115,2 +182,2 @@ return event
 
-export { act, cleanup, fireEvent, render, UnknownSvelteOptionsError }
+export { act, cleanup, fireEvent, render }

types/index.d.ts

@@ -1,82 +0,5 @@
-// Type definitions for Svelte Testing Library
-// 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'
-
-export * from '@testing-library/dom'
-
-type SvelteComponentOptions<C extends SvelteComponent> =
-  | ComponentProps<C>
-  | Partial<ComponentConstructorOptions<ComponentProps<C>>>
-
-type Constructor<T> = new (...args: any[]) => T
-
-/**
- * Render a Component into the Document.
- */
-export type RenderResult<
-  C extends SvelteComponent,
-  Q extends Queries = typeof queries,
-> = {
-  container: HTMLElement
-  baseElement: HTMLElement
-  component: C
-  debug: (el?: HTMLElement | DocumentFragment) => void
-  rerender: (props: Partial<ComponentProps<C>>) => Promise<void>
-  unmount: () => void
-} & { [P in keyof Q]: BoundFunction<Q[P]> }
-
-export interface RenderOptions<Q extends Queries = typeof queries> {
-  baseElement?: HTMLElement
-  queries?: Q
-}
-
-export function render<
-  C extends SvelteComponent,
-  Q extends Queries = typeof queries,
->(
-  component: Constructor<C>,
-  componentOptions?: SvelteComponentOptions<C>,
-  renderOptions?: RenderOptions<Q>
-): RenderResult<C, Q>
-
-/**
- * Unmounts trees that were mounted with render.
- */
-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 FireObject = {
-  [K in EventType]: (
-    element: Document | Element | Window,
-    options?: {}
-  ) => Promise<boolean>
-}
-
-export const fireEvent: FireFunction & FireObject
-
-/**
- * Calls a function and notifies Svelte to flush any pending state changes.
- *
- * If the function returns a Promise, that Promise will be resolved first.
- */
-export function act(fn?: () => unknown): Promise<void>
+export * from "@testing-library/dom";
+export * from "./pure.js";
+export { UnknownSvelteOptionsError } from "./core/index.js";
+export { fireEvent } from "./pure.js";
+//# sourceMappingURL=index.d.ts.map

types/vite.d.ts

@@ -1,12 +0,5 @@
-import type { Plugin } from 'vite'
-
-/**
- * Vite plugin to configure @testing-library/svelte.
- *
- * Ensures Svelte is imported correctly in tests
- * and that the DOM is cleaned up after each test.
- */
-export function svelteTesting(options?: {
-  resolveBrowser?: boolean
-  autoCleanup?: boolean
-}): Plugin
+export function svelteTesting({ resolveBrowser, autoCleanup, }?: {
+    resolveBrowser?: boolean;
+    autoCleanup?: boolean;
+}): import("vite").Plugin;
+//# sourceMappingURL=vite.d.ts.map

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41224

increased by31.5%

Number of package files

27

increased by107.69%

Lines of code

520

increased by31.31%

Number of lines in readme file

224

increased by3.23%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes