From 52dd599e6ed8f327235b1ca4bca000a5c38c19fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Wed, 26 Apr 2023 12:36:23 +0200 Subject: [PATCH 01/24] chore: remove `styfle/cancel-workflow-action` usage --- .github/workflows/release.yml | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 752e5ee..c93525d 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -6,6 +6,10 @@ on: pull_request: branches: [main] +concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + cancel-in-progress: true + jobs: main: # ignore all-contributors PRs @@ -15,9 +19,6 @@ jobs: node: [10, 12, 14, 16] runs-on: ubuntu-latest steps: - - name: 🛑 Cancel Previous Runs - uses: styfle/cancel-workflow-action@0.9.1 - - name: ⬇️ Checkout repo uses: actions/checkout@v3 @@ -45,9 +46,6 @@ jobs: contains('refs/heads/main,refs/heads/beta,refs/heads/next,refs/heads/alpha', github.ref) && github.event_name == 'push' }} steps: - - name: 🛑 Cancel Previous Runs - uses: styfle/cancel-workflow-action@0.9.1 - - name: ⬇️ Checkout repo uses: actions/checkout@v3 From 377607721c94006e0bcffd60a1fb5962829411de Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Tue, 6 Jun 2023 21:59:01 -0400 Subject: [PATCH 02/24] move the module to be esm To do that I've also switched jest for vitest **NOTE** I'm soon going to be potentially without Internet connection. I don't want to merge this and just walk away, so I'll need some :+1: and backup peeps on this one. --- package.json | 26 ++- .../__snapshots__/render.test.js.snap | 26 ++- src/__tests__/auto-cleanup.test.js | 41 ++--- src/__tests__/debug.test.js | 27 ++-- src/__tests__/events.test.js | 39 ++--- src/__tests__/fixtures/Comp.svelte | 8 +- .../fixtures/{Comp.html => Comp2.svelte} | 0 src/__tests__/multi-base.test.js | 59 ++++--- src/__tests__/render.test.js | 148 +++++++++--------- src/__tests__/rerender.test.js | 49 +++--- src/__tests__/unmount.test.js | 42 ++--- src/test-setup.js | 10 ++ svelte.config.js | 7 + vite.config.js | 11 ++ 14 files changed, 283 insertions(+), 210 deletions(-) rename src/__tests__/fixtures/{Comp.html => Comp2.svelte} (100%) create mode 100644 src/test-setup.js create mode 100644 svelte.config.js create mode 100644 vite.config.js diff --git a/package.json b/package.json index 64837b7..4fc151d 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,8 @@ "name": "@testing-library/svelte", "version": "0.0.0-semantically-released", "description": "Simple and complete Svelte testing utilities that encourage good testing practices.", - "main": "dist/index.js", + "main": "src/index.js", + "type": "module", "types": "types/index.d.ts", "license": "MIT", "homepage": "https://github.com/testing-library/svelte-testing-library#readme", @@ -29,7 +30,6 @@ "e2e" ], "files": [ - "dist", "dont-cleanup-after-each.js", "pure.js", "types/index.d.ts" @@ -37,13 +37,11 @@ "scripts": { "toc": "doctoc README.md", "lint": "eslint src --fix", - "clean": "rimraf dist", - "build": "npm run clean && babel src --out-dir dist --ignore '**/__tests__/**'", "test": "jest src", "test:watch": "npm run test -- --watch", "test:update": "npm run test -- --updateSnapshot --coverage", "setup": "npm install && npm run validate", - "validate": "npm run clean && npm-run-all lint test build", + "validate": "npm run clean && npm-run-all lint test", "contributors:add": "all-contributors add", "contributors:generate": "all-contributors generate" }, @@ -54,17 +52,13 @@ "@testing-library/dom": "^8.1.0" }, "devDependencies": { - "@babel/cli": "^7.6.2", - "@babel/core": "^7.6.2", - "@babel/plugin-transform-modules-commonjs": "^7.6.0", - "@babel/preset-env": "^7.6.2", "@commitlint/cli": "^13.1.0", "@commitlint/config-conventional": "^13.1.0", + "@sveltejs/vite-plugin-svelte": "^2.4.1", "@testing-library/jest-dom": "^5.0.2", "@types/jest": "^27.0.0", + "@vitest/coverage-c8": "^0.32.0", "all-contributors-cli": "^6.9.0", - "babel-eslint": "^10.0.3", - "babel-jest": "^27.0.6", "doctoc": "^2.0.0", "eslint": "^7.2.0", "eslint-config-standard": "^16.0.0", @@ -74,12 +68,15 @@ "eslint-plugin-simple-import-sort": "^7.0.0", "eslint-plugin-svelte3": "^3.0.0", "husky": "^7.0.1", - "jest": "^27.0.0", + "jest": "^29.5.0", + "jest-environment-jsdom": "^29.5.0", "lint-staged": "^11.1.1", "npm-run-all": "^4.1.5", "prettier": "^2.0.1", - "svelte": "^3.0.0", - "svelte-jester": "^2.1.4" + "svelte": "^3.59.1", + "svelte-jester": "^2.1.4", + "vite": "^4.3.9", + "vitest": "^0.32.0" }, "husky": { "hooks": { @@ -120,7 +117,6 @@ ], "testEnvironment": "jsdom", "transform": { - "^.+\\.js$": "babel-jest", "^.+\\.svelte$": "svelte-jester", "^.+\\.html$": "svelte-jester" }, diff --git a/src/__tests__/__snapshots__/render.test.js.snap b/src/__tests__/__snapshots__/render.test.js.snap index f89402e..6210eb5 100644 --- a/src/__tests__/__snapshots__/render.test.js.snap +++ b/src/__tests__/__snapshots__/render.test.js.snap @@ -1,4 +1,28 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`render > should accept svelte component options 1`] = ` + +
+

+ Hello + World + ! +

+ +
+ we have context +
+ + + +
+
+ +`; exports[`render should accept svelte component options 1`] = ` diff --git a/src/__tests__/auto-cleanup.test.js b/src/__tests__/auto-cleanup.test.js index 92104cd..aba0c8a 100644 --- a/src/__tests__/auto-cleanup.test.js +++ b/src/__tests__/auto-cleanup.test.js @@ -1,29 +1,30 @@ +import { describe, test, expect } 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 - // environment which supports afterEach (like jest) - // we'll get automatic cleanup between tests. - test('first', () => { - render(Comp, { props: { name: 'world' } }) - }) + // This just verifies that by importing STL in an + // environment which supports afterEach (like jest) + // we'll get automatic cleanup between tests. + test('first', () => { + render(Comp, { props: { name: 'world' } }) + }) - test('second', () => { - expect(document.body.innerHTML).toEqual('') - }) + test('second', () => { + expect(document.body.innerHTML).toEqual('') + }) }) describe('cleanup of two components', () => { - // This just verifies that by importing STL in an - // environment which supports afterEach (like jest) - // we'll get automatic cleanup between tests. - test('first', () => { - render(Comp, { props: { name: 'world' } }) - render(Comp, { props: { name: 'universe' } }) - }) + // This just verifies that by importing STL in an + // environment which supports afterEach (like jest) + // we'll get automatic cleanup between tests. + test('first', () => { + render(Comp, { props: { name: 'world' } }) + render(Comp, { props: { name: 'universe' } }) + }) - test('second', () => { - expect(document.body.innerHTML).toEqual('') - }) + test('second', () => { + expect(document.body.innerHTML).toEqual('') + }) }) diff --git a/src/__tests__/debug.test.js b/src/__tests__/debug.test.js index ca646bc..b419c30 100644 --- a/src/__tests__/debug.test.js +++ b/src/__tests__/debug.test.js @@ -1,23 +1,24 @@ +import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest' import { prettyDOM } from '@testing-library/dom' import { render } from '..' -import Comp from './fixtures/Comp' +import Comp from './fixtures/Comp.svelte' describe('debug', () => { - beforeEach(() => { - jest.spyOn(console, 'log').mockImplementation(() => {}) - }) + beforeEach(() => { + vi.spyOn(console, 'log').mockImplementation(() => { }) + }) - afterEach(() => { - console.log.mockRestore() - }) + afterEach(() => { + console.log.mockRestore() + }) - test('pretty prints the container', () => { - const { container, debug } = render(Comp, { props: { name: 'world' } }) + test('pretty prints the container', () => { + const { container, debug } = render(Comp, { props: { name: 'world' } }) - debug() + debug() - expect(console.log).toHaveBeenCalledTimes(1) - expect(console.log).toHaveBeenCalledWith(prettyDOM(container)) - }) + expect(console.log).toHaveBeenCalledTimes(1) + expect(console.log).toHaveBeenCalledWith(prettyDOM(container)) + }) }) diff --git a/src/__tests__/events.test.js b/src/__tests__/events.test.js index 60d21c4..cb22bfa 100644 --- a/src/__tests__/events.test.js +++ b/src/__tests__/events.test.js @@ -1,28 +1,29 @@ +import { describe, test, expect } 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 () => { - const { getByText } = render(Comp, { props: { name: 'World' } }) - const button = getByText('Button') + test('state changes are flushed after firing an event', async () => { + const { getByText } = render(Comp, { props: { name: 'World' } }) + const button = getByText('Button') - await fireEvent.click(button) + await fireEvent.click(button) - expect(button).toHaveTextContent('Button Clicked') - }) + expect(button).toHaveTextContent('Button Clicked') + }) - test('calling `fireEvent` directly works too', async () => { - const { getByText } = render(Comp, { props: { name: 'World' } }) - const button = getByText('Button') + test('calling `fireEvent` directly works too', async () => { + const { getByText } = render(Comp, { props: { name: 'World' } }) + const button = getByText('Button') - await fireEvent( - button, - new MouseEvent('click', { - bubbles: true, - cancelable: true - }) - ) + await fireEvent( + button, + new MouseEvent('click', { + bubbles: true, + cancelable: true, + }) + ) - expect(button).toHaveTextContent('Button Clicked') - }) + expect(button).toHaveTextContent('Button Clicked') + }) }) diff --git a/src/__tests__/fixtures/Comp.svelte b/src/__tests__/fixtures/Comp.svelte index 523d2d3..e8abe27 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 100% rename from src/__tests__/fixtures/Comp.html rename to src/__tests__/fixtures/Comp2.svelte diff --git a/src/__tests__/multi-base.test.js b/src/__tests__/multi-base.test.js index a928fe4..b330c30 100644 --- a/src/__tests__/multi-base.test.js +++ b/src/__tests__/multi-base.test.js @@ -1,32 +1,41 @@ +import { describe, test, expect } 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') + 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' - } - }, { - container: treeA - }) + test('container isolates trees from one another', () => { + const { getByText: getByTextInA } = render( + Comp, + { + target: treeA, + props: { + name: 'Tree A', + }, + }, + { + container: treeA, + } + ) - const { getByText: getByTextInB } = render(Comp, { - target: treeB, - props: { - name: 'Tree B' - } - }, { - container: treeB - }) + const { getByText: getByTextInB } = render( + Comp, + { + target: treeB, + props: { + name: 'Tree B', + }, + }, + { + container: treeB, + } + ) - expect(() => getByTextInA('Hello Tree A!')).not.toThrow() - expect(() => getByTextInB('Hello Tree A!')).toThrow() - expect(() => getByTextInA('Hello Tree B!')).toThrow() - expect(() => getByTextInB('Hello Tree B!')).not.toThrow() - }) + expect(() => getByTextInA('Hello Tree A!')).not.toThrow() + expect(() => getByTextInB('Hello Tree A!')).toThrow() + expect(() => getByTextInA('Hello Tree B!')).toThrow() + expect(() => getByTextInB('Hello Tree B!')).not.toThrow() + }) }) diff --git a/src/__tests__/render.test.js b/src/__tests__/render.test.js index 3fc6d2f..bd0fc50 100644 --- a/src/__tests__/render.test.js +++ b/src/__tests__/render.test.js @@ -1,102 +1,104 @@ +import { describe, test, expect, beforeEach } 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 + let props + + const render = (additional = {}) => { + console.log(additional) + return stlRender(Comp, { + target: document.body, + props, + ...additional, + }) + } - const render = (additional = {}) => { - return stlRender(Comp, { - target: document.body, - props, - ...additional, + beforeEach(() => { + props = { + name: 'World', + } }) - } - beforeEach(() => { - props = { - name: 'World', - } - }) + test('renders component into the document', () => { + const { getByText } = render() - test('renders component into the document', () => { - const { getByText } = render() + expect(getByText('Hello World!')).toBeInTheDocument() + }) - expect(getByText('Hello World!')).toBeInTheDocument() - }) + // Dear reader, this is not something you generally want to do in your tests. + test('programmatically change props', async () => { + const { component, getByText } = render() - // Dear reader, this is not something you generally want to do in your tests. - test('programmatically change props', async () => { - const { component, getByText } = render() + expect(getByText('Hello World!')).toBeInTheDocument() - expect(getByText('Hello World!')).toBeInTheDocument() + await act(() => { + component.$set({ name: 'Worlds' }) + }) - await act(() => { - component.$set({ name: 'Worlds' }) + expect(getByText('Hello Worlds!')).toBeInTheDocument() }) - expect(getByText('Hello Worlds!')).toBeInTheDocument() - }) + test('change props with accessors', async () => { + const { component, getByText } = render({ accessors: true }) - test('change props with accessors', async () => { - const { component, getByText } = render({ accessors: true }) + expect(getByText('Hello World!')).toBeInTheDocument() - expect(getByText('Hello World!')).toBeInTheDocument() + expect(component.name).toBe('World') - expect(component.name).toBe('World') + await act(() => { + component.value = 'Planet' + }) - await act(() => { - component.value = 'Planet' + expect(getByText('Hello World!')).toBeInTheDocument() }) - expect(getByText('Hello World!')).toBeInTheDocument() - }) - - test('should accept props directly', () => { - const { getByText } = stlRender(Comp, { name: 'World' }) - 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']]), + test('should accept props directly', () => { + const { getByText } = stlRender(Comp, { name: 'World' }) + expect(getByText('Hello World!')).toBeInTheDocument() }) - expect(container).toMatchSnapshot() - }) - test('should throw error when mixing svelte component options and props', () => { - expect(() => { - stlRender(Comp, { anchor: '', name: 'World' }) - }).toThrow(/Unknown options were found/) - }) + 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('should return a container object, which contains the DOM of the rendered component', () => { - const { container } = render() + test('should throw error when mixing svelte component options and props', () => { + expect(() => { + stlRender(Comp, { anchor: '', name: 'World' }) + }).toThrow(/Unknown options were found/) + }) - expect(container.innerHTML).toBe(document.body.innerHTML) - }) + test('should return a container object, which contains the DOM of the rendered component', () => { + const { container } = render() - test('correctly find component constructor on the default property', () => { - const { getByText } = render(CompDefault, { props: { name: 'World' } }) + expect(container.innerHTML).toBe(document.body.innerHTML) + }) - expect(getByText('Hello World!')).toBeInTheDocument() - }) + test('correctly find component constructor on the default property', () => { + const { getByText } = render(CompDefault, { props: { name: 'World' } }) - test("accept the 'context' option", () => { - const { getByText } = stlRender(Comp, { - props: { - name: 'Universe', - }, - context: new Map([['name', 'context']]), + expect(getByText('Hello World!')).toBeInTheDocument() }) - expect(getByText('we have context')).toBeInTheDocument() - }) + test("accept the 'context' option", () => { + const { getByText } = stlRender(Comp, { + props: { + name: 'Universe', + }, + 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..a7208a8 100644 --- a/src/__tests__/rerender.test.js +++ b/src/__tests__/rerender.test.js @@ -1,31 +1,38 @@ +/** + * @jest-environment jsdom + */ +import { describe, test, expect } from 'vitest' + import { render } from '..' -import Comp from './fixtures/Comp' +import Comp from './fixtures/Comp.svelte' describe('rerender', () => { - test('mounts new component successfully', () => { - const { container, rerender } = render(Comp, { props: { name: 'World 1' } }) + test('mounts new component successfully', () => { + const { container, rerender } = render(Comp, { props: { name: 'World 1' } }) - expect(container.firstChild).toHaveTextContent('Hello World 1!') - rerender({ props: { name: 'World 2' } }) - expect(container.firstChild).toHaveTextContent('Hello World 2!') - }) + expect(container.firstChild).toHaveTextContent('Hello World 1!') + rerender({ props: { name: 'World 2' } }) + expect(container.firstChild).toHaveTextContent('Hello World 2!') + }) - test('destroys old component', () => { - let isDestroyed + test('destroys old component', () => { + let isDestroyed - const { rerender, component } = render(Comp, { props: { name: '' } }) + const { rerender, component } = render(Comp, { props: { name: '' } }) - component.$$.on_destroy.push(() => { isDestroyed = true }) - rerender({ props: { name: '' } }) - expect(isDestroyed).toBeTruthy() - }) + component.$$.on_destroy.push(() => { + isDestroyed = true + }) + rerender({ props: { name: '' } }) + expect(isDestroyed).toBeTruthy() + }) - test('destroys old components on multiple rerenders', () => { - const { rerender, queryByText } = render(Comp, { props: { name: 'Neil' } }) + test('destroys old components on multiple rerenders', () => { + const { rerender, queryByText } = render(Comp, { props: { name: 'Neil' } }) - rerender({ props: { name: 'Alex' } }) - expect(queryByText('Hello Neil!')).not.toBeInTheDocument() - rerender({ props: { name: 'Geddy' } }) - expect(queryByText('Hello Alex!')).not.toBeInTheDocument() - }) + rerender({ props: { name: 'Alex' } }) + expect(queryByText('Hello Neil!')).not.toBeInTheDocument() + rerender({ props: { name: 'Geddy' } }) + expect(queryByText('Hello Alex!')).not.toBeInTheDocument() + }) }) diff --git a/src/__tests__/unmount.test.js b/src/__tests__/unmount.test.js index af41044..fd11ad1 100644 --- a/src/__tests__/unmount.test.js +++ b/src/__tests__/unmount.test.js @@ -1,33 +1,35 @@ +import { test, expect, describe, 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() + test('unmounts component successfully', async () => { + console.warn = vi.fn() - const { unmount, getByText, container } = render(Stopwatch) + const { unmount, getByText, container } = render(Stopwatch) - await fireEvent.click(getByText('Start')) + await fireEvent.click(getByText('Start')) - unmount() + unmount() - // Hey there reader! You don't need to have an assertion like this one - // this is just me making sure that the unmount function works. - // You don't need to do this in your apps. Just rely on the fact that this works. - expect(container.innerHTML).toBe('
') + // Hey there reader! You don't need to have an assertion like this one + // this is just me making sure that the unmount function works. + // You don't need to do this in your apps. Just rely on the fact that this works. + expect(container.innerHTML).toBe('
') - await act() - expect(console.warn).not.toHaveBeenCalled() - }) + await act() + expect(console.warn).not.toHaveBeenCalled() + }) - test('destroying component directly and calling unmount does not log warning', async () => { - console.warn = jest.fn() + test('destroying component directly and calling unmount does not log warning', async () => { + console.warn = vi.fn() - const { unmount, component } = render(Stopwatch) + const { unmount, component } = render(Stopwatch) - component.$destroy() - unmount() + component.$destroy() + unmount() - expect(console.warn).not.toHaveBeenCalled() - }) + expect(console.warn).not.toHaveBeenCalled() + }) }) diff --git a/src/test-setup.js b/src/test-setup.js new file mode 100644 index 0000000..1378839 --- /dev/null +++ b/src/test-setup.js @@ -0,0 +1,10 @@ +import { expect, afterEach } from 'vitest' +import * as matchers from '@testing-library/jest-dom/dist/matchers' +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'], + }, +}) From 2aae45ba84a4af6dd6f3a7a7e9704920548d448b Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Wed, 7 Jun 2023 09:24:58 -0400 Subject: [PATCH 03/24] upgrade eslint --- .eslintrc.js => .eslintrc.cjs | 22 ++-- package.json | 14 +-- src/__tests__/auto-cleanup.test.js | 41 ++++---- src/__tests__/debug.test.js | 26 ++--- src/__tests__/events.test.js | 39 ++++---- src/__tests__/fixtures/Comp.svelte | 2 +- src/__tests__/fixtures/Comp2.svelte | 6 +- src/__tests__/multi-base.test.js | 67 +++++++------ src/__tests__/render.test.js | 149 ++++++++++++++-------------- src/__tests__/rerender.test.js | 48 ++++----- src/__tests__/unmount.test.js | 40 ++++---- src/pure.js | 10 +- src/test-setup.js | 7 +- 13 files changed, 235 insertions(+), 236 deletions(-) rename .eslintrc.js => .eslintrc.cjs (61%) diff --git a/.eslintrc.js b/.eslintrc.cjs similarity index 61% rename from .eslintrc.js rename to .eslintrc.cjs index 4ef4d17..b536f9f 100644 --- a/.eslintrc.js +++ b/.eslintrc.cjs @@ -3,29 +3,23 @@ module.exports = { env: { browser: true, es6: true, - jest: true + jest: true, }, - parser: 'babel-eslint', - extends: [ - 'standard' - ], - plugins: [ - 'svelte3', - 'simple-import-sort' - ], + extends: ['standard'], + plugins: ['svelte3', 'simple-import-sort'], rules: { 'max-len': ['warn', { code: 100 }], 'simple-import-sort/imports': 'error', - 'no-multiple-empty-lines': ['error', { max: 2, maxBOF: 2, maxEOF: 0 }] + 'no-multiple-empty-lines': ['error', { max: 2, maxBOF: 2, maxEOF: 0 }], }, overrides: [ { files: ['**/*.svelte'], - processor: 'svelte3/svelte3' - } + processor: 'svelte3/svelte3', + }, ], parserOptions: { ecmaVersion: 2019, - sourceType: 'module' - } + sourceType: 'module', + }, } diff --git a/package.json b/package.json index 4fc151d..fc97ad0 100644 --- a/package.json +++ b/package.json @@ -60,13 +60,13 @@ "@vitest/coverage-c8": "^0.32.0", "all-contributors-cli": "^6.9.0", "doctoc": "^2.0.0", - "eslint": "^7.2.0", - "eslint-config-standard": "^16.0.0", - "eslint-plugin-import": "^2.18.2", - "eslint-plugin-node": "^11.0.0", - "eslint-plugin-promise": "^5.1.0", - "eslint-plugin-simple-import-sort": "^7.0.0", - "eslint-plugin-svelte3": "^3.0.0", + "eslint": "^8.42.0", + "eslint-config-standard": "^17.1.0", + "eslint-plugin-import": "^2.27.5", + "eslint-plugin-node": "^11.1.0", + "eslint-plugin-promise": "^6.1.1", + "eslint-plugin-simple-import-sort": "^10.0.0", + "eslint-plugin-svelte3": "^4.0.0", "husky": "^7.0.1", "jest": "^29.5.0", "jest-environment-jsdom": "^29.5.0", diff --git a/src/__tests__/auto-cleanup.test.js b/src/__tests__/auto-cleanup.test.js index aba0c8a..349ee39 100644 --- a/src/__tests__/auto-cleanup.test.js +++ b/src/__tests__/auto-cleanup.test.js @@ -1,30 +1,31 @@ -import { describe, test, expect } from 'vitest' +import { describe, expect, test } from 'vitest' + import { render } from '..' import Comp from './fixtures/Comp.svelte' describe('auto-cleanup', () => { - // This just verifies that by importing STL in an - // environment which supports afterEach (like jest) - // we'll get automatic cleanup between tests. - test('first', () => { - render(Comp, { props: { name: 'world' } }) - }) + // This just verifies that by importing STL in an + // environment which supports afterEach (like jest) + // we'll get automatic cleanup between tests. + test('first', () => { + render(Comp, { props: { name: 'world' } }) + }) - test('second', () => { - expect(document.body.innerHTML).toEqual('') - }) + test('second', () => { + expect(document.body.innerHTML).toEqual('') + }) }) describe('cleanup of two components', () => { - // This just verifies that by importing STL in an - // environment which supports afterEach (like jest) - // we'll get automatic cleanup between tests. - test('first', () => { - render(Comp, { props: { name: 'world' } }) - render(Comp, { props: { name: 'universe' } }) - }) + // This just verifies that by importing STL in an + // environment which supports afterEach (like jest) + // we'll get automatic cleanup between tests. + test('first', () => { + render(Comp, { props: { name: 'world' } }) + render(Comp, { props: { name: 'universe' } }) + }) - test('second', () => { - expect(document.body.innerHTML).toEqual('') - }) + test('second', () => { + expect(document.body.innerHTML).toEqual('') + }) }) diff --git a/src/__tests__/debug.test.js b/src/__tests__/debug.test.js index b419c30..1072a0f 100644 --- a/src/__tests__/debug.test.js +++ b/src/__tests__/debug.test.js @@ -1,24 +1,24 @@ -import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest' import { prettyDOM } from '@testing-library/dom' +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' import { render } from '..' import Comp from './fixtures/Comp.svelte' describe('debug', () => { - beforeEach(() => { - vi.spyOn(console, 'log').mockImplementation(() => { }) - }) + beforeEach(() => { + vi.spyOn(console, 'log').mockImplementation(() => { }) + }) - afterEach(() => { - console.log.mockRestore() - }) + afterEach(() => { + console.log.mockRestore() + }) - test('pretty prints the container', () => { - const { container, debug } = render(Comp, { props: { name: 'world' } }) + test('pretty prints the container', () => { + const { container, debug } = render(Comp, { props: { name: 'world' } }) - debug() + debug() - expect(console.log).toHaveBeenCalledTimes(1) - expect(console.log).toHaveBeenCalledWith(prettyDOM(container)) - }) + expect(console.log).toHaveBeenCalledTimes(1) + expect(console.log).toHaveBeenCalledWith(prettyDOM(container)) + }) }) diff --git a/src/__tests__/events.test.js b/src/__tests__/events.test.js index cb22bfa..fccf990 100644 --- a/src/__tests__/events.test.js +++ b/src/__tests__/events.test.js @@ -1,29 +1,30 @@ -import { describe, test, expect } from 'vitest' +import { describe, expect, test } from 'vitest' + import { fireEvent, render } from '..' import Comp from './fixtures/Comp.svelte' describe('events', () => { - test('state changes are flushed after firing an event', async () => { - const { getByText } = render(Comp, { props: { name: 'World' } }) - const button = getByText('Button') + test('state changes are flushed after firing an event', async () => { + const { getByText } = render(Comp, { props: { name: 'World' } }) + const button = getByText('Button') - await fireEvent.click(button) + await fireEvent.click(button) - expect(button).toHaveTextContent('Button Clicked') - }) + expect(button).toHaveTextContent('Button Clicked') + }) - test('calling `fireEvent` directly works too', async () => { - const { getByText } = render(Comp, { props: { name: 'World' } }) - const button = getByText('Button') + test('calling `fireEvent` directly works too', async () => { + const { getByText } = render(Comp, { props: { name: 'World' } }) + const button = getByText('Button') - await fireEvent( - button, - new MouseEvent('click', { - bubbles: true, - cancelable: true, - }) - ) + await fireEvent( + button, + new MouseEvent('click', { + bubbles: true, + cancelable: true + }) + ) - expect(button).toHaveTextContent('Button Clicked') - }) + expect(button).toHaveTextContent('Button Clicked') + }) }) diff --git a/src/__tests__/fixtures/Comp.svelte b/src/__tests__/fixtures/Comp.svelte index e8abe27..ec04c05 100644 --- a/src/__tests__/fixtures/Comp.svelte +++ b/src/__tests__/fixtures/Comp.svelte @@ -9,7 +9,7 @@ const contextName = getContext('name') - function handleClick() { + function handleClick () { buttonText = 'Button Clicked' } diff --git a/src/__tests__/fixtures/Comp2.svelte b/src/__tests__/fixtures/Comp2.svelte index d6dc7f4..104e81a 100644 --- a/src/__tests__/fixtures/Comp2.svelte +++ 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 b330c30..39f28d1 100644 --- a/src/__tests__/multi-base.test.js +++ b/src/__tests__/multi-base.test.js @@ -1,41 +1,42 @@ -import { describe, test, expect } from 'vitest' +import { describe, expect, test } from 'vitest' + import { render } from '..' import Comp from './fixtures/Comp.svelte' describe('multi-base', () => { - const treeA = document.createElement('div') - const treeB = document.createElement('div') + 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', - }, - }, - { - container: treeA, - } - ) + test('container isolates trees from one another', () => { + const { getByText: getByTextInA } = render( + Comp, + { + target: treeA, + props: { + name: 'Tree A' + } + }, + { + container: treeA + } + ) - const { getByText: getByTextInB } = render( - Comp, - { - target: treeB, - props: { - name: 'Tree B', - }, - }, - { - container: treeB, - } - ) + const { getByText: getByTextInB } = render( + Comp, + { + target: treeB, + props: { + name: 'Tree B' + } + }, + { + container: treeB + } + ) - expect(() => getByTextInA('Hello Tree A!')).not.toThrow() - expect(() => getByTextInB('Hello Tree A!')).toThrow() - expect(() => getByTextInA('Hello Tree B!')).toThrow() - expect(() => getByTextInB('Hello Tree B!')).not.toThrow() - }) + expect(() => getByTextInA('Hello Tree A!')).not.toThrow() + expect(() => getByTextInB('Hello Tree A!')).toThrow() + expect(() => getByTextInA('Hello Tree B!')).toThrow() + expect(() => getByTextInB('Hello Tree B!')).not.toThrow() + }) }) diff --git a/src/__tests__/render.test.js b/src/__tests__/render.test.js index bd0fc50..0a84101 100644 --- a/src/__tests__/render.test.js +++ b/src/__tests__/render.test.js @@ -1,104 +1,105 @@ -import { describe, test, expect, beforeEach } from 'vitest' +import { beforeEach, describe, expect, test } from 'vitest' + import { act, render as stlRender } from '..' import Comp from './fixtures/Comp.svelte' import CompDefault from './fixtures/Comp2.svelte' describe('render', () => { - let props - - const render = (additional = {}) => { - console.log(additional) - return stlRender(Comp, { - target: document.body, - props, - ...additional, - }) - } - - beforeEach(() => { - props = { - name: 'World', - } + let props + + const render = (additional = {}) => { + console.log(additional) + return stlRender(Comp, { + target: document.body, + props, + ...additional }) + } - test('renders component into the document', () => { - const { getByText } = render() + beforeEach(() => { + props = { + name: 'World' + } + }) - expect(getByText('Hello World!')).toBeInTheDocument() - }) + test('renders component into the document', () => { + const { getByText } = render() - // Dear reader, this is not something you generally want to do in your tests. - test('programmatically change props', async () => { - const { component, getByText } = render() + expect(getByText('Hello World!')).toBeInTheDocument() + }) - expect(getByText('Hello World!')).toBeInTheDocument() + // Dear reader, this is not something you generally want to do in your tests. + test('programmatically change props', async () => { + const { component, getByText } = render() - await act(() => { - component.$set({ name: 'Worlds' }) - }) + expect(getByText('Hello World!')).toBeInTheDocument() - expect(getByText('Hello Worlds!')).toBeInTheDocument() + await act(() => { + component.$set({ name: 'Worlds' }) }) - test('change props with accessors', async () => { - const { component, getByText } = render({ accessors: true }) + expect(getByText('Hello Worlds!')).toBeInTheDocument() + }) - expect(getByText('Hello World!')).toBeInTheDocument() + test('change props with accessors', async () => { + const { component, getByText } = render({ accessors: true }) - expect(component.name).toBe('World') + expect(getByText('Hello World!')).toBeInTheDocument() - await act(() => { - component.value = 'Planet' - }) + expect(component.name).toBe('World') - expect(getByText('Hello World!')).toBeInTheDocument() + await act(() => { + component.value = 'Planet' }) - test('should accept props directly', () => { - const { getByText } = stlRender(Comp, { name: 'World' }) - expect(getByText('Hello World!')).toBeInTheDocument() + expect(getByText('Hello World!')).toBeInTheDocument() + }) + + test('should accept props directly', () => { + const { getByText } = stlRender(Comp, { name: 'World' }) + 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('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('should throw error when mixing svelte component options and props', () => { + expect(() => { + stlRender(Comp, { anchor: '', name: 'World' }) + }).toThrow(/Unknown options were found/) + }) - test('should throw error when mixing svelte component options and props', () => { - expect(() => { - stlRender(Comp, { anchor: '', name: 'World' }) - }).toThrow(/Unknown options were found/) - }) + test('should return a container object, which contains the DOM of the rendered component', () => { + const { container } = render() - test('should return a container object, which contains the DOM of the rendered component', () => { - const { container } = render() + expect(container.innerHTML).toBe(document.body.innerHTML) + }) - expect(container.innerHTML).toBe(document.body.innerHTML) - }) + test('correctly find component constructor on the default property', () => { + const { getByText } = render(CompDefault, { props: { name: 'World' } }) - test('correctly find component constructor on the default property', () => { - const { getByText } = render(CompDefault, { props: { name: 'World' } }) + expect(getByText('Hello World!')).toBeInTheDocument() + }) - expect(getByText('Hello World!')).toBeInTheDocument() + test("accept the 'context' option", () => { + const { getByText } = stlRender(Comp, { + props: { + name: 'Universe' + }, + context: new Map([['name', 'context']]) }) - test("accept the 'context' option", () => { - const { getByText } = stlRender(Comp, { - props: { - name: 'Universe', - }, - context: new Map([['name', 'context']]), - }) - - expect(getByText('we have context')).toBeInTheDocument() - }) + expect(getByText('we have context')).toBeInTheDocument() + }) }) diff --git a/src/__tests__/rerender.test.js b/src/__tests__/rerender.test.js index a7208a8..e3eddb2 100644 --- a/src/__tests__/rerender.test.js +++ b/src/__tests__/rerender.test.js @@ -1,38 +1,38 @@ /** * @jest-environment jsdom */ -import { describe, test, expect } from 'vitest' +import { describe, expect, test } from 'vitest' import { render } from '..' import Comp from './fixtures/Comp.svelte' describe('rerender', () => { - test('mounts new component successfully', () => { - const { container, rerender } = render(Comp, { props: { name: 'World 1' } }) + test('mounts new component successfully', () => { + const { container, rerender } = render(Comp, { props: { name: 'World 1' } }) - expect(container.firstChild).toHaveTextContent('Hello World 1!') - rerender({ props: { name: 'World 2' } }) - expect(container.firstChild).toHaveTextContent('Hello World 2!') - }) - - test('destroys old component', () => { - let isDestroyed + expect(container.firstChild).toHaveTextContent('Hello World 1!') + rerender({ props: { name: 'World 2' } }) + expect(container.firstChild).toHaveTextContent('Hello World 2!') + }) - const { rerender, component } = render(Comp, { props: { name: '' } }) - - component.$$.on_destroy.push(() => { - isDestroyed = true - }) - rerender({ props: { name: '' } }) - expect(isDestroyed).toBeTruthy() - }) + test('destroys old component', () => { + let isDestroyed - test('destroys old components on multiple rerenders', () => { - const { rerender, queryByText } = render(Comp, { props: { name: 'Neil' } }) + const { rerender, component } = render(Comp, { props: { name: '' } }) - rerender({ props: { name: 'Alex' } }) - expect(queryByText('Hello Neil!')).not.toBeInTheDocument() - rerender({ props: { name: 'Geddy' } }) - expect(queryByText('Hello Alex!')).not.toBeInTheDocument() + component.$$.on_destroy.push(() => { + isDestroyed = true }) + rerender({ props: { name: '' } }) + expect(isDestroyed).toBeTruthy() + }) + + test('destroys old components on multiple rerenders', () => { + const { rerender, queryByText } = render(Comp, { props: { name: 'Neil' } }) + + rerender({ props: { name: 'Alex' } }) + expect(queryByText('Hello Neil!')).not.toBeInTheDocument() + rerender({ props: { name: 'Geddy' } }) + expect(queryByText('Hello Alex!')).not.toBeInTheDocument() + }) }) diff --git a/src/__tests__/unmount.test.js b/src/__tests__/unmount.test.js index fd11ad1..86a29dd 100644 --- a/src/__tests__/unmount.test.js +++ b/src/__tests__/unmount.test.js @@ -1,35 +1,35 @@ -import { test, expect, describe, vi } from 'vitest' +import { describe, expect, test, vi } from 'vitest' import { act, fireEvent, render } from '..' import Stopwatch from './fixtures/Stopwatch.svelte' describe('unmount', () => { - test('unmounts component successfully', async () => { - console.warn = vi.fn() + test('unmounts component successfully', async () => { + console.warn = vi.fn() - const { unmount, getByText, container } = render(Stopwatch) + const { unmount, getByText, container } = render(Stopwatch) - await fireEvent.click(getByText('Start')) + await fireEvent.click(getByText('Start')) - unmount() + unmount() - // Hey there reader! You don't need to have an assertion like this one - // this is just me making sure that the unmount function works. - // You don't need to do this in your apps. Just rely on the fact that this works. - expect(container.innerHTML).toBe('
') + // Hey there reader! You don't need to have an assertion like this one + // this is just me making sure that the unmount function works. + // You don't need to do this in your apps. Just rely on the fact that this works. + expect(container.innerHTML).toBe('
') - await act() - expect(console.warn).not.toHaveBeenCalled() - }) + await act() + expect(console.warn).not.toHaveBeenCalled() + }) - test('destroying component directly and calling unmount does not log warning', async () => { - console.warn = vi.fn() + test('destroying component directly and calling unmount does not log warning', async () => { + console.warn = vi.fn() - const { unmount, component } = render(Stopwatch) + const { unmount, component } = render(Stopwatch) - component.$destroy() - unmount() + component.$destroy() + unmount() - expect(console.warn).not.toHaveBeenCalled() - }) + expect(console.warn).not.toHaveBeenCalled() + }) }) 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 index 1378839..fb76eb6 100644 --- a/src/test-setup.js +++ b/src/test-setup.js @@ -1,10 +1,11 @@ -import { expect, afterEach } from 'vitest' 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() + await act() + cleanup() }) From ef13ff77084a33d47470dbd1292e49ea85052443 Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Wed, 7 Jun 2023 09:35:57 -0400 Subject: [PATCH 04/24] the clean script is no longer required --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index fc97ad0..b7f7d0a 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "test:watch": "npm run test -- --watch", "test:update": "npm run test -- --updateSnapshot --coverage", "setup": "npm install && npm run validate", - "validate": "npm run clean && npm-run-all lint test", + "validate": "npm-run-all lint test", "contributors:add": "all-contributors add", "contributors:generate": "all-contributors generate" }, From 66fc1363b7b9d36e93ccac059639bdb7dba13010 Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Wed, 7 Jun 2023 09:39:40 -0400 Subject: [PATCH 05/24] test the last 3 versions of node --- .github/workflows/release.yml | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index c93525d..fd0e641 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -16,7 +16,7 @@ jobs: if: ${{ !contains(github.head_ref, 'all-contributors') }} strategy: matrix: - node: [10, 12, 14, 16] + node: [16, 18, 20] runs-on: ubuntu-latest steps: - name: ⬇️ Checkout repo @@ -41,8 +41,7 @@ jobs: release: needs: main runs-on: ubuntu-latest - if: - ${{ github.repository == 'testing-library/svelte-testing-library' && + if: ${{ github.repository == 'testing-library/svelte-testing-library' && contains('refs/heads/main,refs/heads/beta,refs/heads/next,refs/heads/alpha', github.ref) && github.event_name == 'push' }} steps: From 5fcb78a65aad4e0f51b64e237fd0dbfb3e22d987 Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Wed, 7 Jun 2023 09:44:12 -0400 Subject: [PATCH 06/24] actually using vitest (duh) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b7f7d0a..7536906 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "scripts": { "toc": "doctoc README.md", "lint": "eslint src --fix", - "test": "jest src", + "test": "vitest run src", "test:watch": "npm run test -- --watch", "test:update": "npm run test -- --updateSnapshot --coverage", "setup": "npm install && npm run validate", From 313abbbb06a149f0843a0929cfe11027d9b75136 Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Wed, 7 Jun 2023 09:59:07 -0400 Subject: [PATCH 07/24] fix the tests to work with vitest --- .eslintrc.cjs | 2 +- .../__snapshots__/auto-cleanup-skip.test.js.snap | 4 +++- src/__tests__/act.test.js | 11 +++++++---- src/__tests__/auto-cleanup-skip.test.js | 8 +++++--- src/__tests__/render.test.js | 1 - 5 files changed, 16 insertions(+), 10 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index b536f9f..2cfe699 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -19,7 +19,7 @@ module.exports = { }, ], parserOptions: { - ecmaVersion: 2019, + ecmaVersion: 2022, sourceType: 'module', }, } diff --git a/src/__tests__/__snapshots__/auto-cleanup-skip.test.js.snap b/src/__tests__/__snapshots__/auto-cleanup-skip.test.js.snap index 8daef3b..07620a0 100644 --- a/src/__tests__/__snapshots__/auto-cleanup-skip.test.js.snap +++ b/src/__tests__/__snapshots__/auto-cleanup-skip.test.js.snap @@ -1,3 +1,5 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`auto-cleanup-skip > second 1`] = `""`; exports[`auto-cleanup-skip second 1`] = `"

Hello world!

we have undefined
"`; 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__/render.test.js b/src/__tests__/render.test.js index 0a84101..6beb984 100644 --- a/src/__tests__/render.test.js +++ b/src/__tests__/render.test.js @@ -8,7 +8,6 @@ describe('render', () => { let props const render = (additional = {}) => { - console.log(additional) return stlRender(Comp, { target: document.body, props, From 58cbecf47e5a982edb9135224117be603189d262 Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Wed, 7 Jun 2023 13:07:13 -0400 Subject: [PATCH 08/24] import the pure.js in src, not dist --- pure.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pure.js b/pure.js index 7466726..19163a0 100644 --- a/pure.js +++ b/pure.js @@ -1,2 +1,2 @@ // Makes it so people can import from '@testing-library/svelte/pure' -module.exports = require('./dist/pure') +import './src/pure.js' From c3f4bbd68ba76f096684cc8903e5e8db450843ff Mon Sep 17 00:00:00 2001 From: Yanick Date: Sat, 17 Jun 2023 08:39:05 -0400 Subject: [PATCH 09/24] remove jest and its dependencies --- package.json | 27 ++----------------- .../auto-cleanup-skip.test.js.snap | 2 -- .../__snapshots__/render.test.js.snap | 23 ---------------- 3 files changed, 2 insertions(+), 50 deletions(-) diff --git a/package.json b/package.json index 7536906..4bbd198 100644 --- a/package.json +++ b/package.json @@ -55,8 +55,7 @@ "@commitlint/cli": "^13.1.0", "@commitlint/config-conventional": "^13.1.0", "@sveltejs/vite-plugin-svelte": "^2.4.1", - "@testing-library/jest-dom": "^5.0.2", - "@types/jest": "^27.0.0", + "@testing-library/jest-dom": "^5.16.5", "@vitest/coverage-c8": "^0.32.0", "all-contributors-cli": "^6.9.0", "doctoc": "^2.0.0", @@ -68,13 +67,11 @@ "eslint-plugin-simple-import-sort": "^10.0.0", "eslint-plugin-svelte3": "^4.0.0", "husky": "^7.0.1", - "jest": "^29.5.0", - "jest-environment-jsdom": "^29.5.0", + "jsdom": "^22.1.0", "lint-staged": "^11.1.1", "npm-run-all": "^4.1.5", "prettier": "^2.0.1", "svelte": "^3.59.1", - "svelte-jester": "^2.1.4", "vite": "^4.3.9", "vitest": "^0.32.0" }, @@ -104,25 +101,5 @@ "extends": [ "@commitlint/config-conventional" ] - }, - "jest": { - "testPathIgnorePatterns": [ - "src/__tests__/fixtures" - ], - "collectCoverageFrom": [ - "src/*.js" - ], - "setupFilesAfterEnv": [ - "@testing-library/jest-dom/extend-expect" - ], - "testEnvironment": "jsdom", - "transform": { - "^.+\\.svelte$": "svelte-jester", - "^.+\\.html$": "svelte-jester" - }, - "moduleFileExtensions": [ - "js", - "svelte" - ] } } diff --git a/src/__tests__/__snapshots__/auto-cleanup-skip.test.js.snap b/src/__tests__/__snapshots__/auto-cleanup-skip.test.js.snap index 07620a0..2631c86 100644 --- a/src/__tests__/__snapshots__/auto-cleanup-skip.test.js.snap +++ b/src/__tests__/__snapshots__/auto-cleanup-skip.test.js.snap @@ -1,5 +1,3 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`auto-cleanup-skip > second 1`] = `""`; - -exports[`auto-cleanup-skip second 1`] = `"

Hello world!

we have undefined
"`; diff --git a/src/__tests__/__snapshots__/render.test.js.snap b/src/__tests__/__snapshots__/render.test.js.snap index 6210eb5..a31cf2e 100644 --- a/src/__tests__/__snapshots__/render.test.js.snap +++ b/src/__tests__/__snapshots__/render.test.js.snap @@ -23,26 +23,3 @@ exports[`render > should accept svelte component options 1`] = `
`; - -exports[`render should accept svelte component options 1`] = ` - -
-

- Hello - World - ! -

- -
- we have context -
- - -
-
- -`; From 6b74ebb15c27c87169b8f8fef1187e18f28ce855 Mon Sep 17 00:00:00 2001 From: Yanick Date: Sat, 17 Jun 2023 08:47:07 -0400 Subject: [PATCH 10/24] move eslint from jest to vitest env --- .eslintrc.cjs | 4 ++-- package.json | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 2cfe699..523f78b 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -3,9 +3,9 @@ module.exports = { env: { browser: true, es6: true, - jest: true, + "vitest-globals/env": true }, - extends: ['standard'], + extends: ['standard', "plugin:vitest-globals/recommended"], plugins: ['svelte3', 'simple-import-sort'], rules: { 'max-len': ['warn', { code: 100 }], diff --git a/package.json b/package.json index 4bbd198..b02386c 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "eslint-plugin-promise": "^6.1.1", "eslint-plugin-simple-import-sort": "^10.0.0", "eslint-plugin-svelte3": "^4.0.0", + "eslint-plugin-vitest-globals": "^1.3.1", "husky": "^7.0.1", "jsdom": "^22.1.0", "lint-staged": "^11.1.1", From 07d2cec0e44dfeb53074869268ebe5774e1d136f Mon Sep 17 00:00:00 2001 From: Yanick Date: Sat, 17 Jun 2023 08:51:50 -0400 Subject: [PATCH 11/24] add src/* to the files --- package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/package.json b/package.json index b02386c..205a9b3 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,8 @@ "e2e" ], "files": [ + "src/pure.js", + "src/index.js", "dont-cleanup-after-each.js", "pure.js", "types/index.d.ts" From 19f00b7ef2902c3ec87adfae33f2955e989bf0f6 Mon Sep 17 00:00:00 2001 From: Yanick Date: Sat, 17 Jun 2023 09:00:47 -0400 Subject: [PATCH 12/24] upgrade eslint svelte plugin --- .eslintrc.cjs | 8 ++------ package.json | 2 +- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 523f78b..6aa12f1 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -3,20 +3,16 @@ module.exports = { env: { browser: true, es6: true, - "vitest-globals/env": true + "vitest-globals/env": true }, extends: ['standard', "plugin:vitest-globals/recommended"], - plugins: ['svelte3', 'simple-import-sort'], + plugins: ['svelte', 'simple-import-sort'], rules: { 'max-len': ['warn', { code: 100 }], 'simple-import-sort/imports': 'error', 'no-multiple-empty-lines': ['error', { max: 2, maxBOF: 2, maxEOF: 0 }], }, overrides: [ - { - files: ['**/*.svelte'], - processor: 'svelte3/svelte3', - }, ], parserOptions: { ecmaVersion: 2022, diff --git a/package.json b/package.json index 205a9b3..ca2fe81 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^6.1.1", "eslint-plugin-simple-import-sort": "^10.0.0", - "eslint-plugin-svelte3": "^4.0.0", + "eslint-plugin-svelte": "^2.30.0", "eslint-plugin-vitest-globals": "^1.3.1", "husky": "^7.0.1", "jsdom": "^22.1.0", From 26ee9e863ca4c3d82d8a5aa912eda11d74dc421b Mon Sep 17 00:00:00 2001 From: Yanick Date: Mon, 19 Jun 2023 08:42:32 -0400 Subject: [PATCH 13/24] change eslint-plugin-node for eslint-plugin-n --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ca2fe81..6c0b0d9 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "eslint": "^8.42.0", "eslint-config-standard": "^17.1.0", "eslint-plugin-import": "^2.27.5", - "eslint-plugin-node": "^11.1.0", + "eslint-plugin-n": "^16.0.0", "eslint-plugin-promise": "^6.1.1", "eslint-plugin-simple-import-sort": "^10.0.0", "eslint-plugin-svelte": "^2.30.0", From 28ff1b1ae5a9416644eaf148ac0a61732a85254b Mon Sep 17 00:00:00 2001 From: Yanick Date: Mon, 19 Jun 2023 08:45:18 -0400 Subject: [PATCH 14/24] plain put src/ in the files listing --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index 6c0b0d9..8b336d8 100644 --- a/package.json +++ b/package.json @@ -30,8 +30,7 @@ "e2e" ], "files": [ - "src/pure.js", - "src/index.js", + "src/", "dont-cleanup-after-each.js", "pure.js", "types/index.d.ts" From 848498454924f13d772be26a9ecde16c3be9d49f Mon Sep 17 00:00:00 2001 From: Yanick Date: Mon, 19 Jun 2023 08:46:38 -0400 Subject: [PATCH 15/24] remove the root pure.js --- package.json | 1 - pure.js | 2 -- 2 files changed, 3 deletions(-) delete mode 100644 pure.js diff --git a/package.json b/package.json index 8b336d8..27cd8c3 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,6 @@ "files": [ "src/", "dont-cleanup-after-each.js", - "pure.js", "types/index.d.ts" ], "scripts": { diff --git a/pure.js b/pure.js deleted file mode 100644 index 19163a0..0000000 --- a/pure.js +++ /dev/null @@ -1,2 +0,0 @@ -// Makes it so people can import from '@testing-library/svelte/pure' -import './src/pure.js' From 1643da5de4b3b9352077d997c794a38aa2dffbd5 Mon Sep 17 00:00:00 2001 From: Yanick Date: Mon, 19 Jun 2023 08:50:30 -0400 Subject: [PATCH 16/24] remove dont-clean-up-after-each.js --- dont-clean-up-after-each.js | 1 - package.json | 1 - 2 files changed, 2 deletions(-) delete mode 100644 dont-clean-up-after-each.js diff --git a/dont-clean-up-after-each.js b/dont-clean-up-after-each.js deleted file mode 100644 index 3facae5..0000000 --- a/dont-clean-up-after-each.js +++ /dev/null @@ -1 +0,0 @@ -process.env.STL_SKIP_AUTO_CLEANUP = true diff --git a/package.json b/package.json index 27cd8c3..309e18d 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,6 @@ ], "files": [ "src/", - "dont-cleanup-after-each.js", "types/index.d.ts" ], "scripts": { From 3fe725280f67b4defe2feee73efb568238f57856 Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Mon, 19 Jun 2023 14:20:06 -0400 Subject: [PATCH 17/24] tidy code Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- .eslintrc.cjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 6aa12f1..f952ad1 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -5,7 +5,7 @@ module.exports = { es6: true, "vitest-globals/env": true }, - extends: ['standard', "plugin:vitest-globals/recommended"], + extends: ['standard', 'plugin:vitest-globals/recommended'], plugins: ['svelte', 'simple-import-sort'], rules: { 'max-len': ['warn', { code: 100 }], From 8070e035dafbda07f7843cf88b8620d559592e8a Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Mon, 19 Jun 2023 14:21:38 -0400 Subject: [PATCH 18/24] change quotes for prettierification Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- .eslintrc.cjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index f952ad1..97b6929 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -3,7 +3,7 @@ module.exports = { env: { browser: true, es6: true, - "vitest-globals/env": true + 'vitest-globals/env': true }, extends: ['standard', 'plugin:vitest-globals/recommended'], plugins: ['svelte', 'simple-import-sort'], From 227fda3a0913fa65f70e1a719b12e1f54526f5c0 Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Mon, 19 Jun 2023 14:22:28 -0400 Subject: [PATCH 19/24] put dependencies in alphabetical order Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 309e18d..081447f 100644 --- a/package.json +++ b/package.json @@ -59,11 +59,11 @@ "all-contributors-cli": "^6.9.0", "doctoc": "^2.0.0", "eslint": "^8.42.0", - "eslint-config-standard": "^17.1.0", "eslint-plugin-import": "^2.27.5", "eslint-plugin-n": "^16.0.0", "eslint-plugin-promise": "^6.1.1", "eslint-plugin-simple-import-sort": "^10.0.0", + "eslint-config-standard": "^17.1.0", "eslint-plugin-svelte": "^2.30.0", "eslint-plugin-vitest-globals": "^1.3.1", "husky": "^7.0.1", From fe21493dc12deeaf0d9f44f736ef3a4541e0ca7c Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Tue, 20 Jun 2023 06:35:25 -0400 Subject: [PATCH 20/24] Update package.json Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 081447f..0caca0d 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@testing-library/svelte", "version": "0.0.0-semantically-released", "description": "Simple and complete Svelte testing utilities that encourage good testing practices.", - "main": "src/index.js", + "exports": "src/index.js", "type": "module", "types": "types/index.d.ts", "license": "MIT", From 14b7cd1543c76986906c1499f22c2b326deecf8c Mon Sep 17 00:00:00 2001 From: Yanick Date: Fri, 23 Jun 2023 04:12:04 -0400 Subject: [PATCH 21/24] we don't have the build stage anymore --- .github/workflows/release.yml | 3 --- 1 file changed, 3 deletions(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index fd0e641..5204198 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -58,9 +58,6 @@ jobs: with: useLockFile: false - - name: 🏗 Run build script - run: npm run build - - name: 🚀 Release uses: cycjimmy/semantic-release-action@v2 with: From c9231e6089d13e65e7f1893cbc728f0a2525eaed Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Thu, 22 Jun 2023 12:49:41 -0700 Subject: [PATCH 22/24] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0caca0d..62be775 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "contributors:generate": "all-contributors generate" }, "peerDependencies": { - "svelte": "3.x" + "svelte": "^3 || ^4" }, "dependencies": { "@testing-library/dom": "^8.1.0" From 9717fde4b92dec4846fd371b9b64dd8837da707c Mon Sep 17 00:00:00 2001 From: Yanick Date: Sat, 24 Jun 2023 04:13:49 -0400 Subject: [PATCH 23/24] BREAKING CHANGE: update for svelte 4 --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index b0633dd..0808979 100644 --- a/README.md +++ b/README.md @@ -10,8 +10,7 @@ /> -

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

+

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

[**Read The Docs**](https://testing-library.com/docs/svelte-testing-library/intro) | [Edit the docs](https://github.com/alexkrolick/testing-library-docs) From a7ad7fd969f2dc0d0cc70bb81539991a8c77f327 Mon Sep 17 00:00:00 2001 From: Yanick Date: Sat, 24 Jun 2023 04:20:07 -0400 Subject: [PATCH 24/24] feat: update for svelte 4 BREAKING CHANGE: moving to ESM --- .babelrc | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 .babelrc diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 49cabba..0000000 --- a/.babelrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "presets": [["@babel/preset-env", { "targets": { "node": "8" } }]], - "plugins": [ - ["@babel/plugin-transform-modules-commonjs", { "allowTopLevelThis": true }] - ] -}