Skip to content

Commit

Permalink
feat: avoid creating new node processes by leveraging processAsync (#57)
Browse files Browse the repository at this point in the history
BREAKING CHANGE: async transformers are only supported in Jest `>=27`.
  • Loading branch information
benmccann authored and mihar-22 committed Aug 4, 2021
1 parent fc6a595 commit 92760dd
Show file tree
Hide file tree
Showing 17 changed files with 16,700 additions and 10,646 deletions.
128 changes: 56 additions & 72 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ Simply precompiles Svelte components before importing them into Jest tests.

[![version][version-badge]][package]
[![MIT License][license-badge]][license]

</div>

<hr />
Expand All @@ -16,7 +17,6 @@ Simply precompiles Svelte components before importing them into Jest tests.
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [Why not just use x?](#why-not-just-use-x)
- [Installation](#installation)
- [Babel](#babel)
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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.
Expand All @@ -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_
Expand All @@ -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
Expand Down
8 changes: 4 additions & 4 deletions _svelte.config.cjs
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
const { replace } = require('svelte-preprocess')
const { replace } = require("svelte-preprocess");

module.exports = {
preprocess: [
// strip style tag
replace([[/<!--[^]*?-->|<style(\s[^]*?)?(?:>([^]*?)<\/style>|\/>)/gi, '']])
]
}
replace([[/<!--[^]*?-->|<style(\s[^]*?)?(?:>([^]*?)<\/style>|\/>)/gi, ""]]),
],
};
19 changes: 7 additions & 12 deletions jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,15 @@
* https://jestjs.io/docs/en/configuration.html
*/
export default {
coverageProvider: 'v8',
coverageProvider: "v8",

moduleFileExtensions: ['js', 'ts', 'cjs'],
moduleFileExtensions: ["js", "ts", "cjs"],

testMatch: [
'**/__tests__/**/*.?(c)[jt]s?(x)',
'**/?(*.)+(spec|test).?(c)[tj]s?(x)',
'!**/fixtures/**'
],
testMatch: ["**/?(*.)+(spec|test).?(c)[tj]s?(x)"],

testRunner: 'jest-circus/runner',
testRunner: "jest-circus/runner",

transform: {
'^.+\\.ts$': 'esbuild-jest',
'^.+\\.js$': 'esbuild-jest'
}
}
"^.+\\.ts$": "esbuild-jest",
},
};
Loading

0 comments on commit 92760dd

Please sign in to comment.