Svelte 4 support and ESM as default

.github/dependabot.yml

@@ -0,0 +1,6 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"

.vscode/settings.json

@@ -1,7 +1,4 @@
 {
-  // disable builtin validation
-  "javascript.validate.enable": false,
-
   "standard.autoFixOnSave": true,
 
   // SVELTE

README.md

@@ -5,6 +5,10 @@
 Simply precompiles Svelte components before importing them into Jest tests.
 </p>
 
+<p>
+This version requires Jest >= 27 and defaults to ESM, which is required with Svelte 4+. If you're using Svelte 3 and want to use CJS, you need to specify the <strong>full path</strong> for the jest transformer in your jest config.
+</p>
+
 [![version][version-badge]][package]
 [![MIT License][license-badge]][license]
 
@@ -19,9 +23,13 @@ Simply precompiles Svelte components before importing them into Jest tests.
 
 - [Why not just use x?](#why-not-just-use-x)
 - [Installation](#installation)
-  - [Manual install](#manual-install)
-  - [Babel](#babel)
+  - [Manual installation](#manual-installation)
+    - [ESM version](#esm-version)
+    - [CJS (CommonJS) version](#cjs-commonjs-version)
+  - [Babel (only for CJS)](#babel-only-for-cjs)
   - [TypeScript](#typescript)
+    - [ESM version](#esm-version-1)
+    - [CJS version](#cjs-version)
   - [Preprocess](#preprocess)
 - [Options](#options)
   - [CJS mode options](#cjs-mode-options)
@@ -33,35 +41,57 @@ Simply precompiles Svelte components before importing them into Jest tests.
 
 ## Why not just use x?
 
-Seems like other libraries won't working with preprocessors, won't maintained actively or didn't
+Seems like other libraries won't be working with preprocessors, won't be maintained actively or didn't
 have proper licensing.
 
 ## Installation
 
-If you're using SvelteKit, you can setup and install with [svelte-add-jest](https://github.com/rossyman/svelte-add-jest) by running:
+If you're using SvelteKit, you can set it up and install it with [svelte-add-jest](https://github.com/rossyman/svelte-add-jest) by running:
 
 ```
 npx apply rossyman/svelte-add-jest
 ```
 
-### Manual install
+### Manual installation
 
-This library has `peerDependencies` listings for `svelte >= 3`.
+This library has `peerDependencies` listings for `svelte >= 3` and `jest >= 27`.
 
 `npm install svelte-jester -D`
 
-Add the following to your Jest config
+#### ESM version
+
+Add the following to your Jest config:
 
 ```json
 {
   "transform": {
     "^.+\\.svelte$": "svelte-jester"
   },
+  "moduleFileExtensions": ["js", "svelte"],
+  "extensionsToTreatAsEsm": ["svelte"]
+}
+```
+
+Run your tests with `NODE_OPTIONS=--experimental-vm-modules`. For Windows you need to add `cross-env` as well.
+
+```json
+  "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest src",
+```
+
+#### CJS (CommonJS) version
+
+Add the following to your Jest config:
+
+```json
+{
+  "transform": {
+    "^.+\\.svelte$": "svelte-jester/dist/transformer.cjs"
+  },
   "moduleFileExtensions": ["js", "svelte"]
 }
 ```
 
-### Babel
+### Babel (only for CJS)
 
 `npm install @babel/core @babel/preset-env babel-jest -D`
 
@@ -92,6 +122,84 @@ To enable TypeScript support you'll need to setup [`svelte-preprocess`](https://
    npm install typescript svelte-preprocess ts-jest -D
    ```
 
+#### ESM version
+
+1. Create a `svelte.config.js` at the root of your project:
+
+   ```js
+  import preprocess from 'svelte-preprocess'
+
+  /** @type {import('@sveltejs/kit').Config} */
+  export default config = {
+    preprocess: preprocess(),
+    // ...
+   };
+   ```
+
+   To learn what options you can pass to `sveltePreprocess`, please refer to the [documentation](https://github.com/sveltejs/svelte-preprocess/blob/master/docs/preprocessing.md#typescript).
+
+1. In your Jest config, enable preprocessing for `svelte-jester`, and add `ts-jest` as a transform:
+
+```json
+  "transform": {
+    "^.+\\.svelte$": [
+      "svelte-jester",
+      {
+        "preprocess": true
+      }
+    ],
+    "^.+\\.ts$": "ts-jest"
+  },
+  "moduleFileExtensions": [
+    "js",
+    "ts",
+    "svelte"
+  ],
+  "extensionsToTreatAsEsm": [
+    ".svelte",
+    ".ts"
+  ],
+  "globals": {
+    "ts-jest": {
+      "tsconfig": "tsconfig.spec.json",
+      "useESM": true
+    }
+  },
+```
+
+However if you do not want to create a `svelte.config.js` at the root of your
+project or you wish to use a custom config just for tests, you may pass the
+path to the config file to the `preprocess` option thus:
+
+```json
+  "transform": {
+    "^.+\\.svelte$": [
+      "svelte-jester",
+      {
+        "preprocess": "/some/path/to/svelte.config.js"
+      }
+    ],
+    "^.+\\.ts$": "ts-jest"
+  },
+  "moduleFileExtensions": [
+    "js",
+    "ts",
+    "svelte"
+  ],
+  "extensionsToTreatAsEsm": [
+    ".svelte",
+    ".ts"
+  ],
+  "globals": {
+    "ts-jest": {
+      "tsconfig": "tsconfig.spec.json",
+      "useESM": true
+    }
+  },
+```
+
+#### CJS version
+
 1. Create a `svelte.config.js` at the root of your project:
 
    ```js
@@ -111,7 +219,7 @@ To enable TypeScript support you'll need to setup [`svelte-preprocess`](https://
 ```json
   "transform": {
     "^.+\\.svelte$": [
-      "svelte-jester",
+      "svelte-jester/dist/transformer.cjs",
       {
         "preprocess": true
       }
@@ -132,7 +240,7 @@ path to the config file to the `preprocess` option thus:
 ```json
   "transform": {
     "^.+\\.svelte$": [
-      "svelte-jester",
+      "svelte-jester/dist/transformer.cjs",
       {
         "preprocess": "/some/path/to/svelte.config.js"
       }
@@ -155,20 +263,22 @@ To do this, update the file glob above, and follow the instructions in the [ts-j
 
 Preprocessors are loaded from `svelte.config.js` or `svelte.config.cjs`.
 
-Add the following to your Jest config
+Add the following to your Jest config:
 
 ```json
 "transform": {
   "^.+\\.svelte$": ["svelte-jester", { "preprocess": true }]
 }
 ```
 
+For CJS, replace `"svelte-jester"` with `"svelte-jester/dist/transformer.cjs"`.
+
 Create a `svelte.config.js` file and configure it, see
 [svelte-preprocess](https://github.com/kaisermann/svelte-preprocess) for more information.
 
-In CJS mode, `svelte-jester` must start a new a process for each file needing to be preprocessed, which adds a performance overheads.
+In CJS mode, `svelte-jester` must start a new a process for each file needing to be preprocessed, which adds a performance overhead.
 
-In ESM mode, this isn't necessary. You can set `NODE_OPTIONS=--experimental-vm-modules` and `"extensionsToTreatAsEsm": [".svelte"]` to run in ESM mode. However, [mocking support is limited, experimental, and undocumented in ESM mode with `unstable_mockModule`](https://github.com/facebook/jest/issues/10025).
+In ESM mode, this isn't necessary. You can set `NODE_OPTIONS=--experimental-vm-modules` and `"extensionsToTreatAsEsm": [".svelte"]` to run in ESM mode. However, be aware that ESM support in Jest is still experimental as according to their [docs](https://jestjs.io/docs/ecmascript-modules). Follow the development along at https://github.com/facebook/jest/issues/9430.
 
 ## Options
 
@@ -199,7 +309,7 @@ When `upward` is set it will stop at the first config file it finds above the fi
 ```json
 "transform": {
   "^.+\\.js$": "babel-jest",
-  "^.+\\.svelte$": ["svelte-jester", { 
+  "^.+\\.svelte$": ["svelte-jester/dist/transformer.cjs", {
     "preprocess": false,
     "debug": false,
     "compilerOptions": {},

e2e/sveltekit/jest.config.json

@@ -2,12 +2,15 @@
   "transform": {
     "^.+\\.js$": "babel-jest",
     "^.+\\.svelte$": [
-      "../../dist/transformer.mjs",
+      "svelte-jester",
       {
         "preprocess": true
       }
     ],
-    "^.+\\.ts$": "ts-jest"
+    "^.+\\.ts$": ["ts-jest", {
+      "tsconfig": "tsconfig.spec.json",
+      "useESM": true
+    }]
   },
   "moduleNameMapper": {
     "^\\$lib(.*)$": "<rootDir>/src/lib$1",
@@ -28,11 +31,5 @@
   "setupFilesAfterEnv": [
     "@testing-library/jest-dom/extend-expect"
   ],
-  "globals": {
-    "ts-jest": {
-      "tsconfig": "tsconfig.spec.json",
-      "useESM": true
-    }
-  },
   "testEnvironment": "jsdom"
 }

e2e/sveltekit/package.json

@@ -18,19 +18,20 @@
 		"@neoconfetti/svelte": "^1.0.0",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/kit": "^1.20.4",
-		"@testing-library/jest-dom": "^5.14.0",
-		"@testing-library/svelte": "^3.0.0",
+		"@testing-library/jest-dom": "^5.17.0",
+		"@testing-library/svelte": "^4.0.3",
 		"@types/cookie": "^0.5.1",
 		"@types/jest": "^27.0.0",
 		"@types/testing-library__jest-dom": "^5.14.0",
-    "babel-jest": "^29.6.1",
+		"babel-jest": "^29.6.1",
 		"cross-env": "^7.0.3",
-    "jest": "^29.6.1",
-		"svelte": "^3.59.2",
-    "svelte-check": "^3.4.6",
-    "svelte-jester": "workspace:^",
-    "ts-jest": "^29.1.1",
-    "tslib": "^2.6.0",
+		"jest": "^29.6.1",
+		"jest-environment-jsdom": "^29.6.1",
+		"svelte": "^4.1.1",
+		"svelte-check": "^3.4.6",
+		"svelte-jester": "workspace:^",
+		"ts-jest": "^29.1.1",
+		"tslib": "^2.6.0",
 		"typescript": "^4.9.5",
 		"vite": "^4.4.2"
 	}

package.json

@@ -2,18 +2,9 @@
   "name": "svelte-jester",
   "version": "2.3.2",
   "description": "A Jest transformer for Svelte - compile your components before importing them into tests",
-  "main": "dist/transformer.cjs",
-  "module": "dist/transformer.mjs",
-  "exports": {
-    ".": {
-      "import": "./dist/transformer.mjs",
-      "require": "./dist/transformer.cjs"
-    },
-    "./package.json": "./package.json"
-  },
   "type": "module",
+  "exports": "./dist/transformer.mjs",
   "license": "MIT",
-  "author": "Rahim Alwer <[email protected]>",
   "engines": {
     "node": ">=16",
     "pnpm": "^8.0.0"
@@ -43,7 +34,9 @@
     "build": "rollup -c rollup.config.cjs",
     "toc": "doctoc README.md",
     "lint": "standard --fix --env jest",
-    "test": "pnpm build && cross-env NODE_OPTIONS=--experimental-vm-modules jest src/__tests__",
+    "test": "pnpm test:esm && pnpm test:cjs",
+    "test:esm": "pnpm build && cross-env NODE_OPTIONS=--experimental-vm-modules jest src/__tests__/transformer.test.js",
+    "test:cjs": "pnpm build && jest src/__tests__/transformer.test.cjs",
     "e2e": "pnpm e2e:svelte && pnpm e2e:sveltekit",
     "e2e:svelte": "cd e2e/svelte && pnpm test",
     "e2e:sveltekit": "cd e2e/sveltekit && pnpm test",
@@ -56,7 +49,7 @@
   },
   "peerDependencies": {
     "jest": ">= 27",
-    "svelte": ">= 3 < 4"
+    "svelte": ">= 3"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.1.0",
@@ -68,12 +61,19 @@
     "jest-circus": "^29.6.1",
     "rollup": "^3.26.3",
     "rollup-plugin-copy-assets": "^2.0.3",
-    "sass": "^1.64.0",
+    "sass": "^1.64.1",
     "standard": "^17.1.0",
     "standard-version": "^9.5.0",
-    "svelte": "^3.59.2",
     "svelte-preprocess": "^5.0.4",
     "typescript": "^5.1.6"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "standard": {
+      "globals": [
+          "jest",
+          "it",
+          "expect",
+          "describe"
+      ]
+  }
 }