为响应打字稿项目设置ts-jest [英] setting up ts-jest for react typescript project

问题描述

我正在尝试为用打字稿编写的react项目设置测试环境.我之前已经做过了，但是可以使用ES6.

I am trying to setup test environment for a react project written in typescript. I have done it before for react but with ES6.

以下是我的package.json相关部分的样子-

Following is how the relevant parts of my package.json look like -

 "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"]
  },

我想提一提，我指望的是ts transpiler，而根本没有配置babel.

I would like to mention that I am counting on ts transpiler and not configured babel at all.

以下是我包含的依赖项-

Following are the dependencies I have included -

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

运行npm run test时我无法理解以下错误，因为我已经在转换中安装并指定了ts-jest-

I am unable to understand following error when I run npm run test as I have already installed and specified ts-jest in transform -

Validation Error:

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

以下是tsconfig.json的样子

Following is how tsconfig.json looks like

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

不确定如何解决以上错误.

Not sure how I can I resolve the error above.

我还尝试在tsconfig.json中配置ts-jest，如下所示，但它仍然给出相同的错误-

I also tried configuring ts-jest in tsconfig.json like below but it still gave same error -

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


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

推荐答案

仔细检查一下，这里的设置与我没有什么不同:

Looking through this, there isnt much that is different from my setup here:

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

玩笑配置之间存在细微差别.以下是我的jest.config.js文件的内容.

There is minor differences in your jest config. Below is the contents of my jest.config.js file.

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

我有一则关于使用ts-jest在没有"create-react-app"的情况下测试Typescript React App ，希望可能会对您有所帮助.

I have a post about testing a Typescript React App using ts-jest without "create-react-app" that hopefully may be of some help to.

这篇关于为响应打字稿项目设置ts-jest的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！