Search code examples
reactjsjestjsnext.jsreact-testing-libraryts-jest

Why isn't ts-jest loading my custom tsconfig file?


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`
      }
    }
  }
}

Solution

  • 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'},
      ],
    },