What is @swc/jest?
The @swc/jest package is a Jest transformer using swc, designed to enable fast JavaScript transformations in Jest tests by leveraging the speed of swc. It allows users to compile their JavaScript and TypeScript code using swc within their Jest testing environment, providing a faster alternative to Babel.
What are @swc/jest's main functionalities?
JavaScript/TypeScript Compilation
This feature allows you to compile JavaScript and TypeScript files using swc within Jest. The code sample shows how to configure Jest to use @swc/jest for transforming files that match the regex pattern, enabling the use of modern JavaScript features and TypeScript in your tests.
module.exports = {
transform: {
'^.+\.(t|j)sx?$': ['@swc/jest']
}
};
Source Maps Support
Enables source maps for easier debugging of tests. When an error occurs, Jest will show the original code location instead of the transformed code location, making it easier to pinpoint issues.
module.exports = {
transform: {
'^.+\.(t|j)sx?$': ['@swc/jest', {
sourceMaps: true
}]
}
};
Custom SWC Configuration
Allows for custom swc configuration directly within the Jest configuration. This example demonstrates enabling TypeScript syntax with decorators and setting the React transform runtime to 'automatic'.
module.exports = {
transform: {
'^.+\.(t|j)sx?$': ['@swc/jest', {
jsc: {
parser: {
syntax: 'typescript',
decorators: true
},
transform: {
react: {
runtime: 'automatic'
}
}
}
}]
}
};
Other packages similar to @swc/jest
babel-jest
babel-jest is a Jest plugin that allows you to use Babel for transforming your JavaScript code. Compared to @swc/jest, babel-jest might be slower due to Babel's comprehensive but more resource-intensive transformations. However, babel-jest offers a wide range of plugins and presets, making it highly customizable.
ts-jest
ts-jest is a TypeScript preprocessor with source map support for Jest. It allows you to use Jest to test TypeScript projects. While ts-jest focuses specifically on TypeScript, @swc/jest supports both JavaScript and TypeScript and generally offers faster compilation times due to swc's performance.
esbuild-jest
esbuild-jest is a Jest transformer using the esbuild bundler. Similar to @swc/jest, it aims to provide fast transformation times for JavaScript and TypeScript code. esbuild-jest and @swc/jest both focus on performance, but they use different underlying tools (esbuild vs. swc) for code transformation.
@swc/jest
SWC binding for Jest.
Installation
npm i -D jest @swc/core @swc/jest
yarn add -D jest @swc/core @swc/jest
Usage
jest.config.js
:
module.exports = {
transform: {
'^.+\\.(t|j)sx?$': '@swc/jest',
},
}
It will load the SWC configuration from .swcrc
by default. You also can customize it:
const fs = require('fs')
const config = JSON.parse(fs.readFileSync(`${__dirname}/.swcrc`, 'utf-8'))
module.exports = {
transform: {
'^.+\\.(t|j)sx?$': ['@swc/jest', { ...config, }],
},
}
Q & A
Q: Jest uses CommonJS by default. But I want to use ESM.
A: Setup Jest following this Guide.
For JavaScript, edit package.json
as follows:
{
"type": "module"
}
For TypeScript, edit jest.config.js
as follows:
module.exports = {
extensionsToTreatAsEsm: ['.ts', '.tsx'],
}
Run test with --experimental-vm-modules
:
cross-env NODE_OPTIONS=--experimental-vm-modules jest
node --experimental-vm-modules ./node_modules/jest/bin/jest.js
Q: What ECMAScript target is set by jsc.target
?
A: By default, the version supported by your Node runtime.
Node version | Default jsc.target |
---|
12 | 'es2018' |
13 | 'es2019' |
14 | 'es2020' |
15 | 'es2021' |
16 | 'es2021' |
17 | 'es2022' |
You can customize this by setting an explicit version in jest.config.js
:
module.exports = {
transform: {
"^.+\\.(t|j)sx?$": [
"@swc/jest",
{
jsc: {
target: "es2021",
},
},
],
},
}
License
MIT