diff --git a/README.md b/README.md
index f354266..d42b708 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,7 @@ Simply precompiles Svelte components before importing them into Jest tests.
[![version][version-badge]][package]
[![MIT License][license-badge]][license]
+
@@ -16,7 +17,6 @@ Simply precompiles Svelte components before importing them into Jest tests.
-
- [Why not just use x?](#why-not-just-use-x)
- [Installation](#installation)
- [Babel](#babel)
@@ -47,16 +47,13 @@ Add the following to your Jest config
"transform": {
"^.+\\.svelte$": "svelte-jester"
},
- "moduleFileExtensions": [
- "js",
- "svelte"
- ]
+ "moduleFileExtensions": ["js", "svelte"]
}
```
### Babel
-```npm install @babel/core @babel/preset-env babel-jest -D```
+`npm install @babel/core @babel/preset-env babel-jest -D`
Add the following to your Jest config
@@ -87,56 +84,58 @@ To enable TypeScript support you'll need to setup [`svelte-preprocess`](https://
1. Create a `svelte.config.js` at the root of your project:
- ```js
- const sveltePreprocess = require("svelte-preprocess");
+ ```js
+ const sveltePreprocess = require("svelte-preprocess");
- module.exports = {
- preprocess: sveltePreprocess({
- // ...
- }),
- };
- ```
+ module.exports = {
+ preprocess: sveltePreprocess({
+ // ...
+ }),
+ };
+ ```
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"
- ]
- ```
- 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"
- ]
- ```
+```json
+ "transform": {
+ "^.+\\.svelte$": [
+ "svelte-jester",
+ {
+ "preprocess": true
+ }
+ ],
+ "^.+\\.ts$": "ts-jest"
+ },
+ "moduleFileExtensions": [
+ "js",
+ "ts",
+ "svelte"
+ ]
+```
+
+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"
+ ]
+```
+
Note that TypeScript supports ES modules, so if you were previously using babel-jest just for ES module transpilation, you can remove babel-jest, babel, and any associated presets and config.
By default, ts-jest will only transpile .ts files though, so if you want to continue using ES modules in .js files, you'll need to configure ts-jest to process .js files as well.
@@ -150,25 +149,25 @@ Add the following to your Jest config
```json
"transform": {
- "^.+\\.js$": "babel-jest",
"^.+\\.svelte$": ["svelte-jester", { "preprocess": true }]
}
```
-Create a `svelte.config.js` file and configure it, see
+Create a `svelte.config.js` file and configure it, see
[svelte-preprocess](https://github.com/kaisermann/svelte-preprocess) for more information.
## Options
-`preprocess` (default: false): Pass in `true` if you are using Svelte preprocessors.
+`preprocess` (default: false): Pass in `true` if you are using Svelte preprocessors.
They are loaded from `svelte.config.js` or `svelte.config.cjs`.
`debug` (default: false): If you'd like to see the output of the compiled code then pass in `true`.
-`compilerOptions` (default: {}): Use this to pass in
+`compilerOptions` (default: {}): Use this to pass in
[Svelte compiler options](https://svelte.dev/docs#svelte_compile).
`rootMode` (default: ""): Pass in `upward` to walk up from the transforming file's directory and use the first `svelte.config.js` or `svelte.config.cjs` found, or throw an error if no config file is discovered. This is particularly useful in a monorepo as it allows you to:
+
- Run tests from the worktree root using Jest projects where you only want to put `svelte.config.js` in workspace folders, and not in the root.
- Run tests from the worktree root using Jest projects, but have different `svelte.config.js` configurations for individual workspaces.
- Have one common `svelte.config.js` in your worktree root (or any directory above the file being transformed) without needing individual `svelte.config.js` files in each workspace. _Note - this root config file can be overriden if necessary by putting another config file into a workspace folder_
@@ -177,26 +176,11 @@ The default mode is to load `svelte.config.js` or `svelte.config.cjs` from the c
When `upward` is set it will stop at the first config file it finds above the file being transformed, but will walk up the directory structure all the way to the filesystem root if it cannot find any config file. This means that if there is no `svelte.config.js` or `svelte.config.cjs` file in the project above the file being transformed, it is always possible that someone will have a forgotten config file in their home directory which could cause unexpected errors in your builds.
-`maxBuffer` (default: 10485760): Sets limit for buffer when `preprocess` is true. It defines the largest amount of data in bytes allowed on stdout or stderr for [child_process.spawnSync](https://nodejs.org/api/child_process.html#child_process_child_process_spawnsync_command_args_options). If exceeded, the child process is terminated and any output is truncated. The default value of 10Mb overrides Node's default value of 1Mb.
-
-```json
-"transform": {
- "^.+\\.js$": "babel-jest",
- "^.+\\.svelte$": ["svelte-jester", {
- "preprocess": false,
- "debug": false,
- "compilerOptions": {},
- "rootMode": "",
- "maxBuffer": 15000000
- }]
-}
-```
-
## Testing Library
-This package is required when using Svelte with the [Testing Library](https://testing-library.com/).
-If you'd like to avoid including implementation details in your tests, and making them more
-maintainble in the long run, then consider checking out
+This package is required when using Svelte with the [Testing Library](https://testing-library.com/).
+If you'd like to avoid including implementation details in your tests, and making them more
+maintainble in the long run, then consider checking out
[@testing-library/svelte](https://github.com/testing-library/svelte-testing-library).
## Credits
diff --git a/_svelte.config.cjs b/_svelte.config.cjs
index 2fde162..5daf248 100644
--- a/_svelte.config.cjs
+++ b/_svelte.config.cjs
@@ -1,8 +1,8 @@
-const { replace } = require('svelte-preprocess')
+const { replace } = require("svelte-preprocess");
module.exports = {
preprocess: [
// strip style tag
- replace([[/|
\ No newline at end of file
+
diff --git a/src/__tests__/fixtures/TypescriptComp.svelte b/src/__tests__/fixtures/TypescriptComp.svelte
index fbf6e4e..778fd79 100644
--- a/src/__tests__/fixtures/TypescriptComp.svelte
+++ b/src/__tests__/fixtures/TypescriptComp.svelte
@@ -1,5 +1,5 @@
-Hello {name}
-
\ No newline at end of file
+ export let name: string = "";
+
+
+Hello {name}
diff --git a/src/__tests__/fixtures/shared/commonTransformerTests.js b/src/__tests__/fixtures/shared/commonTransformerTests.js
deleted file mode 100644
index 63ddbc5..0000000
--- a/src/__tests__/fixtures/shared/commonTransformerTests.js
+++ /dev/null
@@ -1,62 +0,0 @@
-const sharedTests = (dependencies) => {
- const { path, runTransformer } = dependencies
-
- it('should transform basic component', () => {
- runTransformer('BasicComp')
- })
-
- it('should transform when using sass preprocessor', () => {
- runTransformer('SassComp', { preprocess: true })
- })
-
- it('should transform when using full path to preprocess', () => {
- const preprocessPath = path.resolve(__dirname, '../../../../_svelte.config.cjs')
- runTransformer('SassComp', { preprocess: preprocessPath })
- })
-
- it('should search for "svelte.config.cjs" as well as "svelte.config.js"', () => {
- const results = runTransformer('BasicComp', { preprocess: true, rootMode: 'upward' })
- // this is a little brittle, but it demonstrates that the replacements in
- // "svelte.config.cjs" are working
- expect(results).toContain('text("Bye ");')
- })
-
- it('should transform when using typescript preprocessor', () => {
- runTransformer('TypescriptComp', { preprocess: true })
- })
-
- it('should transform basic component and keep styles', () => {
- const code = runTransformer('BasicComp')
- expect(code).toContain('add_css()')
- expect(code).toContain('.counter.active')
- })
-
- it('should accept compiler options', () => {
- const code = runTransformer('BasicComp', { compilerOptions: { css: false } })
- expect(code).not.toContain('add_css()')
- expect(code).not.toContain('.counter.active')
- })
-
- it('should output code to console when debug is true', () => {
- global.window.console.log = jest.fn()
- const code = runTransformer('BasicComp', { debug: true })
- const esInterop = 'Object.defineProperty(exports, "__esModule", { value: true });'
- expect(global.window.console.log).toHaveBeenCalledWith(code.replace(esInterop, ''))
- })
-
- it('should accept maxBuffer option for preprocess buffer limit', () => {
- expect(
- () => runTransformer('SassComp', { preprocess: true, maxBuffer: 1 })
- ).toThrow(/^spawnSync .* ENOBUFS$/)
- runTransformer('SassComp', { preprocess: true, maxBuffer: 5 * 1024 * 1024 })
- })
-
- it('should pass and transform process.env.NODE_ENV variable', () => {
- const code = runTransformer('BasicComp', { preprocess: true, rootMode: 'upward' })
-
- // JEST sets NODE_ENV to test automatically
- expect(code).toContain('test')
- })
-}
-
-export default sharedTests
diff --git a/src/__tests__/fixtures/svelte.config.cjs b/src/__tests__/fixtures/svelte.config.cjs
index ec63a55..163306d 100644
--- a/src/__tests__/fixtures/svelte.config.cjs
+++ b/src/__tests__/fixtures/svelte.config.cjs
@@ -1,13 +1,13 @@
-const { replace } = require('svelte-preprocess')
+const { replace } = require("svelte-preprocess");
-console.log('This should not influence the compiler/preprocessor')
+console.log("This should not influence the compiler/preprocessor");
module.exports = {
preprocess: [
replace([
- [/Hello/gi, 'Bye'],
+ [/Hello/gi, "Bye"],
// replace env var
- [/process\.env\.NODE_ENV/gi, JSON.stringify(process.env.NODE_ENV)]
- ])
- ]
-}
+ [/process\.env\.NODE_ENV/gi, JSON.stringify(process.env.NODE_ENV)],
+ ]),
+ ],
+};
diff --git a/src/__tests__/fixtures/sveltekit.config.js b/src/__tests__/fixtures/sveltekit.config.js
index d733202..bd6963e 100644
--- a/src/__tests__/fixtures/sveltekit.config.js
+++ b/src/__tests__/fixtures/sveltekit.config.js
@@ -1,21 +1,21 @@
-import sveltePreprocess from 'svelte-preprocess'
-import adapter from '@sveltejs/adapter-static'
-const { replace } = sveltePreprocess
+import sveltePreprocess from "svelte-preprocess";
+import adapter from "@sveltejs/adapter-static";
+const { replace } = sveltePreprocess;
-console.log('This should not influence the compiler/preprocessor')
+console.log("This should not influence the compiler/preprocessor");
const config = {
kit: {
- adapter: adapter
+ adapter: adapter,
},
preprocess: [
replace([
// strip style tag
- [/|