为 react typescript 项目设置 ts-jest

Question

我正在尝试为用 typescript 编写的 react 项目设置测试环境。我之前已经为 react 做过，但使用的是 ES6。

以下是我的 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"]
  },

我要提一下，我是指望ts transpiler，根本没有配置babel。

以下是我包含的依赖项-

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

Validation Error:

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

以下是 tsconfig.json 的样子

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

不确定如何解决上述错误。

我也尝试在 tsconfig.json 中配置 ts-jest，如下所示，但仍然报同样的错误 -

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


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

Answer 1

看这个，和我这里的设置没有什么不同：

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

您的 jest 配置存在细微差别。以下是我的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"
  ]
};

我有一篇关于 testing a Typescript React App using ts-jest without "create-react-app" 的帖子，希望对您有所帮助。

Answer 2

这是在 TypeScript React 项目中使用 Jest 的示例设置。我自己创建的，希望对您有所帮助：

jest.config.js

const {defaults} = require('jest-config');

module.exports = {
  bail: true,
  moduleFileExtensions: [...defaults.moduleFileExtensions, 'ts', 'tsx'],
  roots: ['src'],
  testMatch: ['<rootDir>/src/**/?(*.)test.{ts,tsx}'],
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
  },
  verbose: true,
};

package.json

{
  "dependencies": {
    "@types/react": "16.7.18",
    "@types/react-dom": "16.0.11",
    "react": "16.7.0",
    "react-dom": "16.7.0"
  },
  "devDependencies": {
    "jest": "23.6.0",
    "ts-jest": "23.10.5"
  },
  "scripts": {
    "test": "jest"
  },
  "version": "0.0.0"
}

src/Welcome.tsx

import * as React from 'react';

interface WelcomeProps {
  name: string,
}

const Welcome: React.FunctionComponent<WelcomeProps> = (props: WelcomeProps) => {
  return <h1>Hello, {props.name}</h1>;
};

export default Welcome;

src/Welcome.test.tsx

import React from 'react';
import ReactDOM from 'react-dom';

import Welcome from './Welcome';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<Welcome name="John Doe"/>, div);
  ReactDOM.unmountComponentAtNode(div);
});

Answer 3

这是唯一对我有用的配置。这是我的规格：

{
  "name": "project",
  "version": "1.0.0",
  "description": "project",
  "jest": {
    "modulePathIgnorePatterns": [
      "dist/"
    ],
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "moduleNameMapper": {
      "^.+\\.(css|less|scss)$": "identity-obj-proxy"
    },
    "setupFilesAfterEnv": [
      "./setupTests.ts"
    ],
    "coverageReporters": [
      "text",
      "lcov"
    ],
    "coverageDirectory": ".",
    "transform": {
      ".(js|jsx)": "babel-jest",
      ".(ts|tsx)": "ts-jest"
    }
  },
  "peerDependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "devDependencies": {
    "@types/enzyme": "^3.10.5",
    "@types/enzyme-adapter-react-16": "^1.0.6",
    "@types/jest": "^26.0.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "enzyme-adapter-react-16": "^1.12.1",
    "ts-jest": "^26.1.0",
    "typescript": "~3.9.5"
  },
  "scripts": {
    "tsc": "tsc --build tsconfig.json",
    "watch": "tsc --watch",
    "test": "jest",
    "test-coverage": "jest --coverage"
  }
}

setupTests.ts：

import * as Enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

最后是我的 tsconfig.json：

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowJs": true,
    "declaration": true,
    "declarationMap": true,
    "jsx": "react",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "noImplicitAny": true,
    "target": "es5",
    "outDir": "./dist",
    "declarationDir": "./dist",
    "lib": ["es2016", "dom"]
  },
  "include": ["./src/index.ts"]
}

Answer 4

我有同样的错误，并通过在终端中运行以下命令来修复它： 通过 npm： 1.“npm i -D jest typescript” 2.“npm i -D ts-jest @types/jest” 3.“npx ts-jest 配置：init” 4. "npm t or npx jest"

通过纱线： 1.“纱线添加--dev jest typescript” 2.“纱线添加--dev ts-jest @types/jest” 3.“纱线 ts-jest 配置：init” 4.“纱线测试或纱线笑话”

我使用的是 ubuntu 18.04.3 LTS。

Answer 5

根据ts-jest 的文档，您应该设置globals.tsConfig，但它必须是globals.tsconfig。例如：

globals: {
    'ts-jest': {
      // ts-jest configuration goes here
      // https://huafu.github.io/ts-jest/user/config/#ts-jest-options
      // specify tsconfig.json to be used by ts-jest
      tsconfig: '<rootDir>/test/tsconfig.test.json',
    },
  },

tsconfig 为我工作，tsConfig 没有。

来源：https://dev.to/ushakovmaksim/comment/1bc8j