ts-paths-transform

A little helper transforming tsconfig paths to make jest config easier.

⚡ Install

yarn add -D ts-paths-transform

⚡ But why?

Grew tired of adding ts-jest just to use its pathsToModuleNameMapper function.

⚡ Scenario

Let's imagine I want to test a Typescript codebase using jest. I'm using paths like so:

👇 tsconfig.json

{
  [...]
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@cool": ["src/cool/index.ts"],
      "@api/*": ["src/api/*"]
    }
  }
}

Now in jest config, I could use the aforementioned pathsToModuleNameMapper function or set paths manually in moduleNameMapper:

👇 jest.config.ts

const options: Config.InitialOptions = {
  // [...]
  moduleNameMapper: {
    '^@cool$': 'src/cool/index.ts',
    '^@api/(.*)$': 'src/api/$1',
  },
  transform: {
    '^.+\\.[tj]sx?$': ['@swc/jest', {}],
  },
};

Annoying 🥲

⚡ Using transformTsPaths function

Let's use the function this library exposes:

👇 jest.config.ts

import { transformTsPaths } from `ts-paths-transform`;

import { compilerOptions } from './tsconfig.json';

const options: Config.InitialOptions = {
  // [...]
  moduleNameMapper: {
    // [...]
    ...transformTsPaths(compilerOptions.paths)
  },
  transform: {
    '^.+\\.[tj]sx?$': ['@swc/jest', {}],
  },
};

🔶 Options

transformTsPaths accepts a second argument for options:

const paths = transformTsPaths(compilerOptions.paths, {
  prefix: 'blabla',
  verbose: true,
});

🧿 prefix - string

Prepends each path alias with a prefix:

const tsConfigPaths = {
  '@cool': ['src/cool/index.ts'],
  '@api/*': ['src/api/*'],
};
const paths = transformTsPaths(tsConfigPaths, {
  prefix: '<rootDir>/',
});

// Paths =
//  '^@cool$': '<rootDir>/src/cool/index.ts',
//  '^@api/(.*)$': '<rootDir>/src/api/$1',

🧿 verbose - boolean

Displays transformed output:

const tsConfigPaths = {
  '@cool': ['src/cool/index.ts'],
  '@api/*': ['src/api/*'],
};
const paths = transformTsPaths(tsConfigPaths, {
  verbose: true,
});

👇 output:

ts-paths-transform 🚀 - 2 paths were found and transformed ✨
  ^@cool$:                      src/cool/index.ts
  ^@api/(.*)$:                  src/api/$1