1. @swc/jest
swc integration for jest
@swc/jest
Package: @swc/jest
Created by: swc-project
Last modified: Mon, 05 Feb 2024 08:29:45 GMT
Version: 0.2.36
License: MIT
Downloads: 7,957,480
Repository: https://github.com/swc-project/pkgs

Install

npm install @swc/jest
yarn add @swc/jest

@swc/jest

SWC binding for 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 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, /* custom configuration in Jest */ }],
  },
}

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

# or
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

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin