feat: move the module to be esm

.eslintrc.js → .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'
-  }
+    ecmaVersion: 2022,
+    sourceType: 'module',
+  },
 }

.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:

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,21 +30,18 @@
     "e2e"
   ],
   "files": [
-    "dist",
     "dont-cleanup-after-each.js",
     "pure.js",
     "types/index.d.ts"
   ],
   "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": "vitest run 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-all lint test",
     "contributors:add": "all-contributors add",
     "contributors:generate": "all-contributors generate"
   },
@@ -54,32 +52,31 @@
     "@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",
-    "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": "^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"
     },

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'

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`] = `"<div><h1 data-testid=\\"test\\">Hello world!</h1> <div>we have undefined</div> <button>Button</button></div>"`;

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`] = `
+<body>
+  <div>
+    <h1
+      data-testid="test"
+    >
+      Hello 
+      World
+      !
+    </h1>
+
+    <div>
+      we have context
+    </div>
+
+    <button>
+      Button
+    </button>
+    <!--&lt;Comp&gt;-->
+    <div />
+  </div>
+</body>
+`;
 
 exports[`render should accept svelte component options 1`] = `
 <body>

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')

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
   })
 

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

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(() => {

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 () => {

src/__tests__/fixtures/Comp.svelte

@@ -1,3 +1,5 @@
+<svelte:options accessors />
+
 <script>
   import { getContext } from 'svelte'
 
@@ -12,10 +14,10 @@
   }
 </script>
 
-<style></style>
-
 <h1 data-testid="test">Hello {name}!</h1>
 
 <div>we have {contextName}</div>
 
 <button on:click={handleClick}>{buttonText}</button>
+
+<style></style>

src/__tests__/fixtures/Comp.html → src/__tests__/fixtures/Comp2.svelte

@@ -1,10 +1,10 @@
 <script>
   export let name
 
-  let buttonText = "Button Text"
+  let buttonText = 'Button Text'
 
-  function handleClick() {
-    buttonText = "Button Clicked"
+  function handleClick () {
+    buttonText = 'Button Clicked'
   }
 </script>
 

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()

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()