@swc/jest

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.

README

@swc/jest

swc binding for the jest

Installation

# if you use npm
npm i -D jest @swc/core @swc/jest
# if you use yarn
yarn add -D jest @swc/core @swc/jest

Usage

jest.config.js:

module.exports = {
  transform: {
    '^.+\\.(t|j)sx?$': '@swc/jest',
  },
}

It will load swc configuration from .swcrc in default. You also can custom it:

const fs = require('fs')

const config = JSON.parse(fs.readFileSync(`${__dirname}/.swcrc`, 'utf-8'))

module.exports = {
  transform: {
    '^.+\\.(t|j)sx?$': ['@swc/jest', { ...config, /* custom configuration in jest */ }],
  },
}

Q & A

Q: Jest use CommonJS in default. But I want to use ESM.

A: Setup Jest following this Guide.

For JavaScript, it need to configure package.json:

{
  // ...
  "type": "module"
}

For TypeScript, it need some configuration in jest.config.js:

module.exports = {
  // ...
  extensionsToTreatAsEsm: ['.ts', '.tsx'],
}

Run test with --experimental-vm-modules:

cross-env NODE_OPTIONS=--experimental-vm-modules jest

# or
node --experimental-vm-modules ./node_modules/jest/bin/jest.js

License

MIT