Simple and complete Svelte testing utilities that encourage good testing -practices.

Simple and complete Svelte testing utilities that encourage good testing practices.

Button +

diff --git a/src/tests/act.test.js b/src/tests/act.test.js index 6ab7796..6eafc0d 100644 --- a/src/tests/act.test.js +++ b/src/tests/act.test.js @@ -1,5 +1,7 @@ +import { beforeEach, describe, expect, test } from 'vitest' + import { act, fireEvent, render as stlRender } from '..' -import Comp from './fixtures/Comp' +import Comp from './fixtures/Comp.svelte' describe('act', () => { let props @@ -36,9 +38,10 @@ describe('act', () => { }) test('accepts async functions', async () => { - const sleep = (ms) => new Promise(resolve => { - setTimeout(() => resolve(), ms) - }) + const sleep = (ms) => + new Promise((resolve) => { + setTimeout(() => resolve(), ms) + }) const { getByText } = render() const button = getByText('Button') diff --git a/src/tests/auto-cleanup-skip.test.js b/src/tests/auto-cleanup-skip.test.js index df54d43..265f55b 100644 --- a/src/tests/auto-cleanup-skip.test.js +++ b/src/tests/auto-cleanup-skip.test.js @@ -1,11 +1,13 @@ -import Comp from './fixtures/Comp' +import { beforeAll, describe, expect, test } from 'vitest' + +import Comp from './fixtures/Comp.svelte' describe('auto-cleanup-skip', () => { let render - beforeAll(() => { + beforeAll(async () => { process.env.STL_SKIP_AUTO_CLEANUP = 'true' - const stl = require('..') + const stl = await import('..') render = stl.render }) diff --git a/src/tests/auto-cleanup.test.js b/src/tests/auto-cleanup.test.js index 92104cd..349ee39 100644 --- a/src/tests/auto-cleanup.test.js +++ b/src/tests/auto-cleanup.test.js @@ -1,5 +1,7 @@ +import { describe, expect, test } from 'vitest' + import { render } from '..' -import Comp from './fixtures/Comp' +import Comp from './fixtures/Comp.svelte' describe('auto-cleanup', () => { // This just verifies that by importing STL in an diff --git a/src/tests/debug.test.js b/src/tests/debug.test.js index ca646bc..1072a0f 100644 --- a/src/tests/debug.test.js +++ b/src/tests/debug.test.js @@ -1,11 +1,12 @@ import { prettyDOM } from '@testing-library/dom' +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' import { render } from '..' -import Comp from './fixtures/Comp' +import Comp from './fixtures/Comp.svelte' describe('debug', () => { beforeEach(() => { - jest.spyOn(console, 'log').mockImplementation(() => {}) + vi.spyOn(console, 'log').mockImplementation(() => { }) }) afterEach(() => { diff --git a/src/tests/events.test.js b/src/tests/events.test.js index 60d21c4..fccf990 100644 --- a/src/tests/events.test.js +++ b/src/tests/events.test.js @@ -1,5 +1,7 @@ +import { describe, expect, test } from 'vitest' + import { fireEvent, render } from '..' -import Comp from './fixtures/Comp' +import Comp from './fixtures/Comp.svelte' describe('events', () => { test('state changes are flushed after firing an event', async () => { diff --git a/src/tests/fixtures/Comp.svelte b/src/tests/fixtures/Comp.svelte index 523d2d3..ec04c05 100644 --- a/src/tests/fixtures/Comp.svelte +++ b/src/tests/fixtures/Comp.svelte @@ -1,3 +1,5 @@ + + - -
Hello {name}!

we have {contextName}
+ + diff --git a/src/tests/fixtures/Comp.html b/src/tests/fixtures/Comp2.svelte similarity index 59% rename from src/tests/fixtures/Comp.html rename to src/tests/fixtures/Comp2.svelte index d6dc7f4..104e81a 100644 --- a/src/tests/fixtures/Comp.html +++ b/src/tests/fixtures/Comp2.svelte @@ -1,10 +1,10 @@ diff --git a/src/tests/multi-base.test.js b/src/tests/multi-base.test.js index a928fe4..39f28d1 100644 --- a/src/tests/multi-base.test.js +++ b/src/tests/multi-base.test.js @@ -1,28 +1,38 @@ +import { describe, expect, test } from 'vitest' + import { render } from '..' -import Comp from './fixtures/Comp' +import Comp from './fixtures/Comp.svelte' describe('multi-base', () => { const treeA = document.createElement('div') const treeB = document.createElement('div') test('container isolates trees from one another', () => { - const { getByText: getByTextInA } = render(Comp, { - target: treeA, - props: { - name: 'Tree A' + const { getByText: getByTextInA } = render( + Comp, + { + target: treeA, + props: { + name: 'Tree A' + } + }, + { + container: treeA } - }, { - container: treeA - }) + ) - const { getByText: getByTextInB } = render(Comp, { - target: treeB, - props: { - name: 'Tree B' + const { getByText: getByTextInB } = render( + Comp, + { + target: treeB, + props: { + name: 'Tree B' + } + }, + { + container: treeB } - }, { - container: treeB - }) + ) expect(() => getByTextInA('Hello Tree A!')).not.toThrow() expect(() => getByTextInB('Hello Tree A!')).toThrow() diff --git a/src/tests/render.test.js b/src/tests/render.test.js index 3fc6d2f..6beb984 100644 --- a/src/tests/render.test.js +++ b/src/tests/render.test.js @@ -1,6 +1,8 @@ +import { beforeEach, describe, expect, test } from 'vitest' + import { act, render as stlRender } from '..' -import Comp from './fixtures/Comp' -import CompDefault from './fixtures/Comp.html' +import Comp from './fixtures/Comp.svelte' +import CompDefault from './fixtures/Comp2.svelte' describe('render', () => { let props @@ -9,13 +11,13 @@ describe('render', () => { return stlRender(Comp, { target: document.body, props, - ...additional, + ...additional }) } beforeEach(() => { props = { - name: 'World', + name: 'World' } }) @@ -66,7 +68,7 @@ describe('render', () => { target, anchor: div, props: { name: 'World' }, - context: new Map([['name', 'context']]), + context: new Map([['name', 'context']]) }) expect(container).toMatchSnapshot() }) @@ -92,9 +94,9 @@ describe('render', () => { test("accept the 'context' option", () => { const { getByText } = stlRender(Comp, { props: { - name: 'Universe', + name: 'Universe' }, - context: new Map([['name', 'context']]), + context: new Map([['name', 'context']]) }) expect(getByText('we have context')).toBeInTheDocument() diff --git a/src/tests/rerender.test.js b/src/tests/rerender.test.js index 2e1b423..e3eddb2 100644 --- a/src/tests/rerender.test.js +++ b/src/tests/rerender.test.js @@ -1,5 +1,10 @@ +/** + * @jest-environment jsdom + / +import { describe, expect, test } from 'vitest' + import { render } from '..' -import Comp from './fixtures/Comp' +import Comp from './fixtures/Comp.svelte' describe('rerender', () => { test('mounts new component successfully', () => { @@ -15,7 +20,9 @@ describe('rerender', () => { const { rerender, component } = render(Comp, { props: { name: '' } }) - component.$$.on_destroy.push(() => { isDestroyed = true }) + component.$$.on_destroy.push(() => { + isDestroyed = true + }) rerender({ props: { name: '' } }) expect(isDestroyed).toBeTruthy() }) diff --git a/src/tests/unmount.test.js b/src/tests/unmount.test.js index af41044..86a29dd 100644 --- a/src/tests/unmount.test.js +++ b/src/tests/unmount.test.js @@ -1,9 +1,11 @@ +import { describe, expect, test, vi } from 'vitest' + import { act, fireEvent, render } from '..' -import Stopwatch from './fixtures/Stopwatch' +import Stopwatch from './fixtures/Stopwatch.svelte' describe('unmount', () => { test('unmounts component successfully', async () => { - console.warn = jest.fn() + console.warn = vi.fn() const { unmount, getByText, container } = render(Stopwatch) @@ -21,7 +23,7 @@ describe('unmount', () => { }) test('destroying component directly and calling unmount does not log warning', async () => { - console.warn = jest.fn() + console.warn = vi.fn() const { unmount, component } = render(Stopwatch) diff --git a/src/pure.js b/src/pure.js index f9f1474..04d3cb0 100644 --- a/src/pure.js +++ b/src/pure.js @@ -1,7 +1,7 @@ import { fireEvent as dtlFireEvent, getQueriesForElement, - prettyDOM, + prettyDOM } from '@testing-library/dom' import { tick } from 'svelte' @@ -14,7 +14,7 @@ const svelteComponentOptions = [ 'props', 'hydrate', 'intro', - 'context', + 'context' ] const render = ( @@ -56,7 +56,7 @@ const render = ( let component = new ComponentConstructor({ target, - ...checkProps(options), + ...checkProps(options) }) containerCache.add({ container, target, component }) @@ -76,7 +76,7 @@ const render = ( // eslint-disable-next-line no-new component = new ComponentConstructor({ target, - ...checkProps(options), + ...checkProps(options) }) containerCache.add({ container, target, component }) @@ -89,7 +89,7 @@ const render = ( unmount: () => { if (componentCache.has(component)) component.$destroy() }, - ...getQueriesForElement(container, queries), + ...getQueriesForElement(container, queries) } } diff --git a/src/test-setup.js b/src/test-setup.js new file mode 100644 index 0000000..fb76eb6 --- /dev/null +++ b/src/test-setup.js @@ -0,0 +1,11 @@ +import as matchers from '@testing-library/jest-dom/dist/matchers' +import { afterEach, expect } from 'vitest' + +import { act, cleanup } from './pure' + +expect.extend(matchers) + +afterEach(async () => { + await act() + cleanup() +}) diff --git a/svelte.config.js b/svelte.config.js new file mode 100644 index 0000000..61eb947 --- /dev/null +++ b/svelte.config.js @@ -0,0 +1,7 @@ +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' + +export default { + // Consult https://svelte.dev/docs#compile-time-svelte-preprocess + // for more information about preprocessors + preprocess: vitePreprocess(), +} diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..65a1618 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,11 @@ +import { defineConfig } from 'vite' +import { svelte } from '@sveltejs/vite-plugin-svelte' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [svelte()], + test: { + environment: 'jsdom', + setupFiles: ['./src/test-setup.js'], + }, +})

Hello world!

Hello {name}!