Unit testing with TypeScript and tsconfig paths

[talohana]

Summary

When using TypeScript it is often common to use tsconfig paths option, which maps a module name to its' concrete path.

For example, if I have models folder with index.ts file and the following tsconfig.json (baseUrl is required when using paths)

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@models": ["src/models"],
    }
  }
}

Then importing from models becomes

- import { Book } from '../../../models';
+ import { Book } from '@models';

The problem is a missing configuration in unit-testing#using-typescript which causes paths to not be resolved.

Motivation

Including this documentation will help keep consistent way to integrate paths with jest.

Steps to resolve this issue

There are various ways to support paths with jest, I find the most simple way with ts-jest.

After adding ts-jest with npm i -D ts-jest we need to add the following code in jest.config.js:

+ const { compilerOptions } = require('./tsconfig.json');
+ const { pathsToModuleNameMapper } = require('ts-jest/utils');
+ const paths = pathsToModuleNameMapper(compilerOptions.paths, {  prefix: '<rootDir>/' });

module.exports = {
  transform: {
    '^.+\\.[jt]sx?$': '<rootDir>/tests/jest-preprocess.js',
  },
  moduleNameMapper: {
    '.+\\.(css|styl|less|sass|scss)$': `identity-obj-proxy`,
    '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': `<rootDir>/tests/file-mock.js`,
+    ...paths,
  },
  testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],
  watchPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],
  transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
  globals: {
    __PATH_PREFIX__: ``,
  },
  testURL: `http://localhost`,
  setupFilesAfterEnv: [`<rootDir>/tests/jest.setup.js`],
  setupFiles: [`<rootDir>/tests/loadershim.js`],
};

Draft the doc

Using Typescript

...

Using tsconfig paths

If you are using tsconfig paths there is a single change to your config.

1. Add ts-jest

npm install --save-dev ts-jest

2. Update jest.config.js to import and map tsconfig.json paths

const { compilerOptions } = require('./tsconfig.json');
const { pathsToModuleNameMapper } = require('ts-jest/utils');
const paths = pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/' });

3. Add paths to jest.config.js moduleNameMapper

  moduleNameMapper: {
    '.+\\.(css|styl|less|sass|scss)$': `identity-obj-proxy`,
    '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': `<rootDir>/tests/file-mock.js`,
    ...paths,
  },

Open a pull request

• Open a pull request with your work including the words "closes #[this issue's number]" in the pull request description

[github-actions]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions]

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜