Next.js tsconfig.json conflicts / tsconfig incorrectly camel-cased on docs website

[ScottyMJacobson]

Hi all, thanks for providing this tool.

I've been trying to get ts-jest set up to do some TDD within a TypeScript next.js project.

It turns out, next.js will force the jsx field to preserve in your tsconfig.json file every time you run it (relevant discussion here, which causes problems for ts-jest (ts-jest seems to require something like "jsx": "react", or you get a SyntaxError: Unexpected token '<')

A workaround seems to be to leave "jsx": "preserve" in tsconfig.json, but manually override the settings in jest.config.js.

Googling "different tsconfig.js ts-jest" led me to this documentation site, which is exactly what I needed, except for the fact that I couldn't get it working because tsConfig is camelCased across the published docs. (When I went to go fix/PR it in the codebase, however, there was no such camelCasing.)

After using the typescript definition for the globals object, I ended up with this jest.config.js (which works)

/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  globals: {
    // This is necessary because next.js forces { "jsx": "preserve" }, but ts-jest appears to require { "jsx": "react" }
    'ts-jest': {
      tsconfig: {
        jsx: 'react',
      },
    },
  },
};

(I'm writing as verbosely as I am in case it helps anyone else with this issue who google-stumbles across it.)

(And sorry for not following the bug report format)

Thanks!
Scotty

[ahnpnl]

The official site is https://kulshekhar.github.io/ts-jest/ No clue why google suggested the other one :(

[ahnpnl]

I’m not sure the issue you are reporting about, is it about the value of jsx or you want to report about documentation?

[ScottyMJacobson]

I started it because 1) I wanted to point out the incorrect documentation (who does own that site?), and 2) also because I didn't think a good resource existed that talked about the issue between next.js/ts-jest.

Re: 2), it turns out people have talked about this issue, I just hadn't googled the right things

Re: 1) - Is there any way to fix that documentation, though?

[ahnpnl]

that documentation is not valid one because it's under a different domain :) the main documentation is under kulshekhar domain. I don't know how to fix Google search ranking :(

[xiaohanyu]

In case anyone reached here @ScottyMJacobson's answer works absolutely, however, the latest jest (as of now, it is 29.5.0) will report a warning for the config:

ts-jest[ts-jest-transformer] (WARN) Define `ts-jest` config under `globals` is deprecated. Please do
transform: {
    <transform_regex>: ['ts-jest', { /* ts-jest config goes here in Jest */ }],
},

To get rid of the warning, we can change jest.config.js to something like:

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: 'ts-jest',
  transform: {
    // This is necessary because next.js forces { "jsx": "preserve" }, but
    // ts-jest appears to require { "jsx": "react" }
    '^.+\\.[jt]sx?$': [
      'ts-jest',
      {
        tsconfig: {
          jsx: 'react',
        },
      },
    ],
  },
}

You can also set jsx option to be react-jsx in case that you don't want to put a import React from 'react' in every jsx/tsx file. For the difference between jsx: preserver, jsx: react and jsx: react-jsx, you can check here.

I personally use jsx: react-jsx in my project.