Issue: Finalize and test TypeScript support

[natterstefan]

Bug Report

Relevant information

It was not possible to use the react preset in a NextJS TypeScript project (https://github.com/natterstefan/nextjs-tailwind-template) directly. The current setup with ts-loader did not work. This is most likely because of the current module and target in the tsconfig.json in the NextJS project. There is no way to customize this now. Adding tsconfig in globals.["ts-jest"] did not work.

In the end, creating a babel.config.js (according to https://dev.to/ericdouglas/how-to-configure-jest-on-a-next-js-project-2ic6) and using only jest-preset-ns/presets/react/jest-setup.js helped.

Steps to reproduce

1. add the preset again https://github.com/natterstefan/nextjs-tailwind-template/blob/63ad8fd335c0dfda1b8be24c12a2c630b88feee2/jest.config.js#L2
2. run yarn test

It also did not work with the ts-jest preset, but that's maybe a different problem. Maybe adding the preset directly works?

Observed Results

Jest was not able to transpile the files and work with them.

Expected Results

Jest can run the tests

[natterstefan]

Solution

Thanks to vercel/next.js#8663 (comment), I was able to resolve it and I will add it to the README later.

// jest.config.js
module.exports = {
  preset: 'jest-preset-ns/presets/react',
  globals: {
    // we must specify a custom tsconfig for tests because we need the typescript transform
    // to transform jsx into js rather than leaving it jsx such as the next build requires.  you
    // can see this setting in tsconfig.jest.json -> "jsx": "react"
    'ts-jest': {
      tsconfig: 'tsconfig.test.json',
    },
  },
  setupFilesAfterEnv: ['jest-preset-ns/presets/react/jest-setup.js'],
}

This is an example tsconfig.json of nextjs:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": false,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

This is the tsconfig.test.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "jsx": "react"
  }
}