In this post we are going to setup jest
for a TypeScript
project with custom aliases (path mapping) support. If you haven't read my previous post about cleaner imports in TypeScript using aliases, you can do that here. It's pretty cool that we can use the same aliases in our tests to keep them nice and clean ✨
We are going to use yarn
package manager. However, there are no differences with npm
- other than the commands themselves.
Install Jest
- Run
yarn add --dev jest
.
Add TS support
- Add type support:
yarn add --dev @types/jest
- Install
ts-jest
. It's a custom jest transformer that will help us use Jest with TypeScript. - Run
yarn jest --init
to initialize a config file. Answer the questions as you wish (ask Yes for TS support). - Go to your
tsconfig
and"@types/jest"
insidetypes
array:
{
...,
"types": [..., "@types/jest"],
...
}
Add path support
- Make sure you have at least the following config in
jest.config.ts
:
import { pathsToModuleNameMapper, JestConfigWithTsJest } from "ts-jest";
import { compilerOptions } from "./tsconfig.paths.json";
const jestConfig: JestConfigWithTsJest = {
preset: "ts-jest",
moduleDirectories: ["node_modules", "<rootDir>"],
moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths)
}
export default jestConfig;
Here we import our custom paths defined in tsconfig.paths.json
(for more info on this read here):
import { compilerOptions } from "./tsconfig.paths.json";
The moduleDirectories
prop did the trick for me. Also make sure to remove comments from both jest.config
and tsconfig
, since they sometimes cause parsing errors. Hope this helped someone 😎
Top comments (1)
Thank you @mliakos for this tips.
I make it work with
pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/' })
because adding<rootDir>
tomoduleDirectories
generates many typescript compilation failures on my project.