reactjs - configurando ts-jest para un proyecto de React en TypeScript

Estoy intentando configurar un entorno de prueba para un proyecto de React escrito en TypeScript. Lo he hecho antes para React pero con ES6.

A continuación se muestra cómo se ven las partes relevantes de mi package.json -

 "scripts": {
    "test": "NODE_ENV=test jest",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(css)$": "jest-css-modules"
    },
    "transform": {
      "\\.(ts|tsx)$": "ts-jest"
    },
    "testRegex": ".test.(ts|tsx?)$",
    "moduleFileExensions": ["ts", "tsx", "js", "jsx", "json", "node"]
  },

Me gustaría mencionar que estoy contando con el transpilador de TS y no he configurado Babel en absoluto.

A continuación se muestran las dependencias que he incluido -

"dependencies": {
    "@types/jest": "^23.1.4",
    "@types/react": "^16.4.5",
    "@types/react-dom": "^16.0.6",
    "@types/react-redux": "^6.0.3",
    "@types/redux": "^3.6.0",
    "deep-freeze": "0.0.1",
    "jest": "^23.2.0",
    "jest-css-modules": "^1.1.0",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "ts-jest": "^23.0.0",
    "webpack": "^4.12.2"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^5.2.0",
    "css-loader": "^0.28.11",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "prop-types": "^15.6.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "style-loader": "^0.21.0",
    "typescript": "^2.9.2",
    "typings-for-css-modules-loader": "^1.7.0",
    "url-loader": "^1.0.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  }

No puedo entender el siguiente error cuando ejecuto npm run test ya que ya he instalado y especificado ts-jest en transform -

Validation Error:

  Module ts-jest in the transform option was not found.
         <rootDir> is: /Users/rahul/ot/Lab/webpack-playlist

A continuación se muestra cómo se ve tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "noImplicitAny": true,
    "sourceMap": true,
    "target": "es5"
  }
}

No estoy seguro de cómo puedo resolver el error anterior.

También intenté configurar ts-jest en tsconfig.json como abajo, pero aún así dio el mismo error -

// tsconfig.json
    "jest": {
        "globals": {
          "ts-jest": {
            "tsConfigFile": "tsconfig.jest.json"
          }
        }
      }


// tsconfig.jest.json
{
  "extends": "./tsconfig",
  "compilerOptions": {
    "module": "commonjs"
  }
}

Respuesta #1

Mirando esto, no hay mucho que sea diferente de mi configuración aquí:

https://github.com/jasonraimondi/typescript-react-starter

Hay diferencias menores en tu configuración de Jest. A continuación se muestran los contenidos de mi archivo jest.config.js.

module.exports = {
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  },
  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
  ],
  "setupFiles": [
    "<rootDir>/test/setupTests.ts"
  ]
};

Tengo una publicación sobre cómo probar una aplicación de React con Typescript usando ts-jest sin "create-react-app" que, con suerte, puede ser de alguna ayuda.