feat: move the module to be esm

.eslintrc.js → .eslintrc.cjs

@@ -3,29 +3,19 @@ module.exports = {
   env: {
     browser: true,
     es6: true,
-    jest: true
+    'vitest-globals/env': true
   },
-  parser: 'babel-eslint',
-  extends: [
-    'standard'
-  ],
-  plugins: [
-    'svelte3',
-    'simple-import-sort'
-  ],
+  extends: ['standard', 'plugin:vitest-globals/recommended'],
+  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 }]
+    'no-multiple-empty-lines': ['error', { max: 2, maxBOF: 2, maxEOF: 0 }],
   },
   overrides: [
-    {
-      files: ['**/*.svelte'],
-      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",
+  "exports": "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,17 @@
     "e2e"
   ],
   "files": [
-    "dist",
-    "dont-cleanup-after-each.js",
-    "pure.js",
+    "src/",
     "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 +51,29 @@
     "@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",
-    "@testing-library/jest-dom": "^5.0.2",
-    "@types/jest": "^27.0.0",
+    "@sveltejs/vite-plugin-svelte": "^2.4.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@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-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",
-    "jest": "^27.0.0",
+    "jsdom": "^22.1.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",
+    "vite": "^4.3.9",
+    "vitest": "^0.32.0"
   },
   "husky": {
     "hooks": {
@@ -107,26 +101,5 @@
     "extends": [
       "@commitlint/config-conventional"
     ]
-  },
-  "jest": {
-    "testPathIgnorePatterns": [
-      "src/__tests__/fixtures"
-    ],
-    "collectCoverageFrom": [
-      "src/*.js"
-    ],
-    "setupFilesAfterEnv": [
-      "@testing-library/jest-dom/extend-expect"
-    ],
-    "testEnvironment": "jsdom",
-    "transform": {
-      "^.+\\.js$": "babel-jest",
-      "^.+\\.svelte$": "svelte-jester",
-      "^.+\\.html$": "svelte-jester"
-    },
-    "moduleFileExtensions": [
-      "js",
-      "svelte"
-    ]
   }
 }

src/__tests__/__snapshots__/auto-cleanup-skip.test.js.snap

@@ -1,3 +1,3 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`auto-cleanup-skip second 1`] = `"<div><h1 data-testid=\\"test\\">Hello world!</h1> <div>we have undefined</div> <button>Button</button></div>"`;
+exports[`auto-cleanup-skip > second 1`] = `""`;

src/__tests__/__snapshots__/render.test.js.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`render should accept svelte component options 1`] = `
+exports[`render > should accept svelte component options 1`] = `
 <body>
   <div>
     <h1
@@ -18,6 +18,7 @@ exports[`render should accept svelte component options 1`] = `
     <button>
       Button
     </button>
+    <!--&lt;Comp&gt;-->
     <div />
   </div>
 </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()