diff --git a/packages/svelte-core/package.json b/packages/svelte-core/package.json index 76811c8..9a1609a 100644 --- a/packages/svelte-core/package.json +++ b/packages/svelte-core/package.json @@ -5,7 +5,6 @@ "exports": { ".": { "types": "./dist/index.d.ts", - "svelte": "./src/index.js", "default": "./src/index.js" }, "./types": { @@ -27,16 +26,12 @@ "node": ">=16" }, "keywords": [ - "testing", + "tdd", "svelte", "ui", - "dom", - "jsdom", "unit", - "integration", - "functional", - "end-to-end", - "e2e" + "component", + "functional" ], "files": [ "dist", diff --git a/packages/svelte/package.json b/packages/svelte/package.json index 098d966..ac4c333 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -8,6 +8,10 @@ "types": "./dist/index.d.ts", "default": "./src/index.js" }, + "./pure": { + "types": "./dist/pure.d.ts", + "default": "./src/pure.js" + }, "./svelte5": { "types": "./dist/index.d.ts", "default": "./src/index.js" diff --git a/packages/svelte/src/index.js b/packages/svelte/src/index.js index dd05567..b7f76b3 100644 --- a/packages/svelte/src/index.js +++ b/packages/svelte/src/index.js @@ -19,15 +19,4 @@ if (typeof process !== 'undefined' && !process.env.STL_SKIP_AUTO_CLEANUP) { } } -// export all base queries, screen, etc. -export * from '@testing-library/dom' - -// export svelte-specific functions and custom `fireEvent` -export { - act, - cleanup, - fireEvent, - render, - setup, - UnknownSvelteOptionsError, -} from './pure.js' +export * from './pure.js' diff --git a/packages/svelte/src/pure.js b/packages/svelte/src/pure.js index 6e7f369..16faeaf 100644 --- a/packages/svelte/src/pure.js +++ b/packages/svelte/src/pure.js @@ -1,16 +1,11 @@ -import { - configure as configureDTL, - fireEvent as baseFireEvent, - getConfig as getDTLConfig, - getQueriesForElement, - prettyDOM, -} from '@testing-library/dom' +import * as DomTestingLibrary from '@testing-library/dom' import * as Core from '@testing-library/svelte-core' import * as Svelte from 'svelte' /** * Customize how Svelte renders the component. * + * @deprecated Use `import('@testing-library/svelte-core/types').ComponentOptions` instead * @template {import('@testing-library/svelte-core/types').Component} C * @typedef {import('@testing-library/svelte-core/types').ComponentOptions} SvelteComponentOptions */ @@ -18,18 +13,15 @@ import * as Svelte from 'svelte' /** * 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 + * @template {DomTestingLibrary.Queries} [Q=typeof DomTestingLibrary.queries] + * @typedef {import('@testing-library/svelte-core/types').SetupOptions & { queries?: Q }} RenderOptions */ /** * The rendered component and bound testing functions. * * @template {import('@testing-library/svelte-core/types').Component} C - * @template {import('@testing-library/dom').Queries} [Q=typeof import('@testing-library/dom').queries] + * @template {DomTestingLibrary.Queries} [Q=typeof DomTestingLibrary.queries] * * @typedef {{ * container: HTMLElement @@ -39,7 +31,7 @@ import * as Svelte from 'svelte' * rerender: import('@testing-library/svelte-core/types').Rerender * unmount: () => void * } & { - * [P in keyof Q]: import('@testing-library/dom').BoundFunction + * [P in keyof Q]: DomTestingLibrary.BoundFunction * }} RenderResult */ @@ -47,10 +39,10 @@ import * as Svelte from 'svelte' * Render a component into the document. * * @template {import('@testing-library/svelte-core/types').Component} C - * @template {import('@testing-library/dom').Queries} [Q=typeof import('@testing-library/dom').queries] + * @template {DomTestingLibrary.Queries} [Q=typeof DomTestingLibrary.queries] * * @param {import('@testing-library/svelte-core/types').ComponentImport} Component - The component to render. - * @param {SvelteComponentOptions} options - Customize how Svelte renders the component. + * @param {import('@testing-library/svelte-core/types').ComponentOptions} options - Customize how Svelte renders the component. * @param {RenderOptions} renderOptions - Customize how Testing Library sets up the document and binds queries. * @returns {RenderResult} The rendered component and bound testing functions. */ @@ -61,14 +53,19 @@ const render = (Component, options = {}, renderOptions = {}) => { renderOptions ) + const queries = DomTestingLibrary.getQueriesForElement( + baseElement, + renderOptions.queries + ) + return { baseElement, container, component, rerender, unmount, - debug: (el = baseElement) => console.log(prettyDOM(el)), - ...getQueriesForElement(baseElement, renderOptions.queries), + debug: (el = baseElement) => console.log(DomTestingLibrary.prettyDOM(el)), + ...queries, } } @@ -80,15 +77,15 @@ const render = (Component, options = {}, renderOptions = {}) => { * to flush changes to the DOM before proceeding. */ const setup = () => { - const originalDTLConfig = getDTLConfig() + const originalConfig = DomTestingLibrary.getConfig() - configureDTL({ + DomTestingLibrary.configure({ asyncWrapper: act, eventWrapper: Svelte.flushSync ?? ((cb) => cb()), }) Core.addCleanupTask(() => { - configureDTL(originalDTLConfig) + DomTestingLibrary.configure(originalConfig) }) } @@ -101,7 +98,7 @@ const cleanup = () => { * Call a function and wait for Svelte to flush pending changes. * * @template T - * @param {(() => Promise) | () => T} [fn] - A function, which may be `async`, to call before flushing updates. + * @param {() => Promise | T} [fn] - A function, which may be `async`, to call before flushing updates. * @returns {Promise} */ const act = async (fn) => { @@ -114,12 +111,12 @@ const act = async (fn) => { } /** - * @typedef {(...args: Parameters) => Promise>} FireFunction + * @typedef {(...args: Parameters) => Promise>} FireFunction */ /** * @typedef {{ - * [K in import('@testing-library/dom').EventType]: (...args: Parameters) => Promise> + * [K in DomTestingLibrary.EventType]: (...args: Parameters) => Promise> * }} FireObject */ @@ -131,11 +128,14 @@ const act = async (fn) => { * * @type {FireFunction & FireObject} */ -const fireEvent = async (...args) => act(() => baseFireEvent(...args)) +const fireEvent = async (...args) => { + return act(() => DomTestingLibrary.fireEvent(...args)) +} -for (const [key, baseEvent] of Object.entries(baseFireEvent)) { +for (const [key, baseEvent] of Object.entries(DomTestingLibrary.fireEvent)) { fireEvent[key] = async (...args) => act(() => baseEvent(...args)) } +export * from '@testing-library/dom' export { UnknownSvelteOptionsError } from '@testing-library/svelte-core' export { act, cleanup, fireEvent, render, setup }