23

For some reason, my custom tsconfig file isn't being picked up in jest.config.ts. Here is my jest.config.ts:

module.exports = {
  setupFilesAfterEnv: [`./jest.setup.ts`],
  testEnvironment: `jsdom`,
  roots: [
    `<rootDir>/test`
  ],
  testMatch: [
    `**/__tests__/**/*.+(ts|tsx|js)`,
    `**/?(*.)+(spec|test).+(ts|tsx|js)`
  ],
  transform: {
    "^.+\\.(ts|tsx)$": `ts-jest`
  },
  globals: {
    "ts-jest": {
      tsConfig: `tsconfig.jest.json`
    }
  }
}

I know that other parts of this config ARE being applied. For example, if I remove the keys above globals my tests don't run. Also, I know that the change specified in my tsconfig.jest.json file is the necessary change to fix my tests because if I make the same change in my main tsconfig.json file my tests run fine.

I've also tried putting to desired tsconfig compiler options directly into the jest.config.ts file, but that doesn't seem to work either:

module.exports = {
  setupFilesAfterEnv: [`./jest.setup.ts`],
  testEnvironment: `jsdom`,
  roots: [
    `<rootDir>/test`
  ],
  testMatch: [
    `**/__tests__/**/*.+(ts|tsx|js)`,
    `**/?(*.)+(spec|test).+(ts|tsx|js)`
  ],
  transform: {
    "^.+\\.(ts|tsx)$": `ts-jest`
  },
  globals: {
    "ts-jest": {
      tsConfig: {
        jsx: `react`
      }
    }
  }
}
the8thbit
  • 601
  • 1
  • 5
  • 20

2 Answers2

37

Updated answer for jest@29 (released August 2022) and ts-jest@29 (released September 2022)

All of my React component *.tsx-related tests were broken after upgrading Jest-and-friends to version 29. I also received error messages that jestConfig.globals['ts-jest'] is now deprecated.

  1. As per the ts-jest "Options" doc you need to use the lowercased tsconfig and not the camel-cased tsConfig.
  2. As per the ts-jest "TypeScript Config option" doc you should modify your Jest config to jestConfig.transform['regex_match_files'].

The relevant parts of my project's configuration are below. (Caveat: note that I'm using a custom location for my config files, i.e. a dedicated ./config/ directory in the project root, but the principle of specifying the relative-path-to-config-file remains the same).

// ./package.json
// (trimmed to just the relevant parts)
"scripts": {
  "test": "jest --config=./config/.jestrc.js --rootDir=./src/"
},
"devDependencies": {
  "@types/jest": "^29.0.1",
  "jest": "^29.0.3",
  "jest-environment-jsdom": "^29.0.3",
  "ts-jest": "^29.0.0",
  "typescript": "^4.8.3"
}
// ./config/.jestrc.js
// (trimmed to just the relevant parts)
transform: {
  '^.+\\.tsx?$': [
    'ts-jest',
    // required due to custom location of tsconfig.json configuration file
    // https://kulshekhar.github.io/ts-jest/docs/getting-started/options/tsconfig
    {tsconfig: './config/tsconfig.json'},
  ],
},
Dustin Ruetz
  • 388
  • 1
  • 3
  • 4
  • This helps me a lot when updating to Jest@v29. Thank you! – passport4j Sep 21 '22 at 12:27
  • 7
    I just spent three hours finding out that the regex listed in `transform` _must_ be _exactly_ `^.+\\.tsx?$` without any variations at all. I thought I was being clever removing the `x?` because I am not using JSX, but no. I am not clever. – Chris Nielsen Oct 20 '22 at 17:44
  • true that is very strange I'm not sure what's going on since I did a variable on tsx? with ^.+\\.(tsx?)$ and ^.+\\.\\(tsx?\\)$ and it didn't work so I'm not sure what's going on. If this is a true regex it should be working unless ? is not working how I think it's working in normal regex. – arcanereinz Nov 24 '22 at 05:25
  • @ChrisNielsen, @arcanereinz, also check that the `preset` property is not present in the jest configuration file, if you use a recent `ts-jest` (ver 29+) it will conflict with the transforms specified below (see the ts-jest [doc](https://kulshekhar.github.io/ts-jest/docs/getting-started/presets)). – Marco Sacchi Dec 24 '22 at 15:43
16

the correct key is tsconfig not tsConfig.

the8thbit
  • 601
  • 1
  • 5
  • 20
  • 6
    Struggled this for so long the other day because of also finding that dumb documentation (https://huafu.github.io/ts-jest/user/config/) leading you down a cliff. tsConfig gets ignored, tsconfig works. Official documentation is https://jestjs.io/docs/getting-started. –  Aug 04 '21 at 18:26
  • @Matriarx yep, the exact same thing happened to me. Hopefully this question ends up in people's google results – the8thbit Aug 04 '21 at 21:40
  • 4
    You should see a warning about this `(WARN) "[jest-config].globals.ts-jest.tsConfig" is deprecated, use "[jest-config].globals.ts-jest.tsconfig" instead.` – Liam Jul 21 '22 at 19:39