Feature/esm as default transformer

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. If you 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/README.md

@@ -9,17 +9,30 @@ The following steps were executed to create the source for this test.
 (mostly from https://svelte.dev/blog/the-easiest-way-to-get-started and https://testing-library.com/docs/svelte-testing-library/setup)
 
 ```
-cd svelte
-npx degit sveltejs/template . --force
-npm install
-npm install --save-dev jest svelte-jester @babel/preset-env babel-jest testing-library/svelte @testing-library/jest-dom
-# follow all the steps from https://testing-library.com/docs/svelte-testing-library/setup
-# add basic sample from https://testing-library.com/docs/svelte-testing-library/example#test
-# add jsdom environment to the top of the test
-/**
- * @jest-environment jsdom
- */
-# add svelte.config.js from https://wmzy.github.io/svelte-cli/config/#svelte-config-js and https://github.com/sveltejs/language-tools/issues/397#issue-669762537
+./init-svelte.sh
+
+# add the following config to your package.json (mostly from https://testing-library.com/docs/svelte-testing-library/setup but with our own transformer)
+  "jest": {
+    "transform": {
+      "^.+\\.js$": "babel-jest",
+      "^.+\\.svelte$": [
+        "../../dist/transformer.cjs",
+        {
+          "preprocess": true
+        }
+      ]
+    },
+    "moduleFileExtensions": ["js", "svelte"],
+    "setupFilesAfterEnv": ["@testing-library/jest-dom/extend-expect"],
+    "testEnvironment": "jsdom"
+  },
+  "babel": {
+    "presets": [["@babel/preset-env", {"targets": {"node": "current"}}]]
+  }
+
+# add basic component from https://testing-library.com/docs/svelte-testing-library/example#test under __src/__
+# add basic sample from https://testing-library.com/docs/svelte-testing-library/example#test under __src/test/__
+# add svelte.config.js (CJS-style) from https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/in-general.md#generic-setup
 ```
 
 ## SvelteKit (ESM)
@@ -33,12 +46,23 @@ The following steps were executed to create the source for this test.
 ```
 cd sveltekit
 npm init svelte@next
-# choose typescript, no linter/formatter
+# choose Demo App, typescript, no linter, no formatter
+npm install
+
+# add Jest
 npx apply rossyman/svelte-add-jest
-# choose typescript
+# choose Jest DOM, typescript, sample file, jsdom by default
 npm install
-# change path in `jest.config.json` for svelte-jester to `"../../dist/transformer.mjs"`
+# change path for svelte-jester in `jest.config.json` to `[
+        "../../dist/transformer.mjs",
+        {
+          "preprocess": true
+        }
+      ]`
 # move jsdom comment to the top in `src/lib/routes/index-dom.spec.ts`
 npm run test
+# add cross-env
+npm install -D cross-env
+# prefix NODE_OPTIONS with cross-env in the package.json
 ```
 

e2e/init-svelte.sh

@@ -0,0 +1,10 @@
+#!/usr/bin/env sh
+
+mkdir svelte
+cd svelte
+npx degit sveltejs/template . --force
+
+npm install
+npm install --save-dev svelte-preprocess jest svelte-jester @babel/preset-env babel-jest @testing-library/svelte @testing-library/jest-dom
+
+cd ..

e2e/svelte/README.md

@@ -1,6 +1,6 @@
-*Psst — looking for a more complete solution? Check out [SvelteKit](kit.svelte.dev), the official framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.*
+*Psst — looking for a more complete solution? Check out [SvelteKit](https://kit.svelte.dev), the official framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.*
 
-*Looking for a shareable component template instead? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*
+*Looking for a shareable component template instead? You can [use SvelteKit for that as well](https://kit.svelte.dev/docs#packaging) or the older [sveltejs/component-template](https://github.com/sveltejs/component-template)*
 
 ---
 
@@ -33,7 +33,7 @@ npm install
 npm run dev
 ```
 
-Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
+Navigate to [localhost:8080](http://localhost:8080). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
 
 By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.