# Configure for Jest

To configure SWC for a Jest environment, execute the following steps 👇

Open a terminal at the root of the project and install the following packages:

pnpm add -D @workleap/swc-configs @swc/jest @swc/core @swc/helpers

yarn add -D @workleap/swc-configs @swc/jest @swc/core @swc/helpers

npm install -D @workleap/swc-configs @swc/jest @swc/core @swc/helpers

First, create a configuration file named swc.jest.ts at the root of the project:

web-project
├── src
├──── ...
├── package.json
├── swc.jest.ts
├── jest.config.ts

Then, open the newly created file and export the SWC configuration by using the defineJestConfig(options) function:

import { defineJestConfig } from "@workleap/swc-configs";

export const swcConfig = defineJestConfig();

The defineJestConfig(options) function can be used as shown in the previous example, however, if you wish to customize the default configuration, the function also accept a few predefined options to help with that 👇

• Type: string

Sets a base directory from which to resolve module names. This option is usually provided when custom paths are provided. Note that SWC requires the baseUrl to be an absolute path.

// @ts-check

import path from "node:path";
import { browserslistToSwc, defineJestConfig } from "@workleap/swc-configs";

const targets = browserslistToSwc();

export const swcConfig = defineJestConfig(targets, {
    baseUrl: path.resolve("src")
});

• Type: boolean
• Default: false

Whether or not to transform React code.

import { defineJestConfig } from "@workleap/swc-configs";

export const swcConfig = defineJestConfig({
    react: true
});

• Type: "ecmascript" | "typescript"
• Default: "typescript"

Whether SWC should expect to parse JavaScript or TypeScript code.

import { defineJestConfig } from "@workleap/swc-configs";

export const swcConfig = defineJestConfig({
    parser: "ecmascript"
});

• Type: Record<string, string[]>

A series of entries which re-map imports to lookup locations relative to the baseUrl if set.

// @ts-check

import path from "node:path";
import { browserslistToSwc, defineJestConfig } from "@workleap/swc-configs";

const targets = browserslistToSwc();

export const swcConfig = defineJestConfig(targets, {
    baseUrl: path.resolve("src"),
    paths: {
        "@/*": ["*"]
    }
});

The predefined options are useful to quickly customize the default development configuration of @workleap/swc-configs, but only covers a subset of an SWC configuration. If you need full control over the configuration, you can provide configuration transformer functions through the transformers option of the defineJestConfig function. Remember, no locked in ❤️✌️.

To view the default Jest configuration of @workleap/swc-configs, have a look at the jest.ts configuration file on GitHub.

• Type: ((config: SwcConfig, context: SwcConfigTransformerContext) => SwcConfig)[]
• Default: []

transformer(config: SwcConfig, context: SwcConfigTransformerContext) => SwcConfig

import { defineJestConfig, type SwcConfigTransformer, type SwcConfig } from "@workleap/swc-configs";

const useCommonJsModules: SwcConfigTransformer = (config: SwcConfig) => {
    config.module.type = "commonjs";

    return config;
};

export const swcConfig = defineJestConfig({
    transformers: [useCommonJsModules]
});

To configure Jest, open the project jest.config.ts file and add the following code:

import { swcConfig } from "./swc.jest.ts";

const config = {
    transform: {
        "^.+\\.(ts|tsx)$": ["@swc/jest", swcConfig as Record<string, unknown>]
    }
};

To test your new SWC configuration, create a Jest test in Typescript:

export function appendWorld(string: value) {
    console.log(`${string} world!`);
}

test("should append \"world!\"", () => {
    expect(appendWorld("Hello")).toBe("Hello world!");
}

Open a terminal and run Jest directly from the CLI:

pnpm jest

yarn jest

npm run jest

The test should succeed without any error outputted to the console.