/ts-paths-transform

Transforming tsconfig paths for jest

Primary LanguageTypeScript

ts-paths-transform

Open in Visual Studio Code npm bundle size Github workflow Quality Gate Status Maintainability Rating Security Rating Reliability Rating Coverage Lines of Code Technical Debt Code Smells Bugs Vulnerabilities Snyk Vulnerabilities for npm package Duplicated Lines (%) Last commit

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