在Jest中使用ts-jest

在对Typescript的测试中，你可能需要对ts类型进行检查，这时候@babel/preset-typescript并不能帮你完成这样的工作，你就需要使用ts-jest来进行typescript的支持。

详细的ts-jest和babel的对比可见babel7-or-ts。

下面介绍下如何使用ts-jest进行react项目的测试。官方文档可见ts-jest。

安装

yarn add -D jest ts-jest jest-enzyme enzyme enzyme-adapter-react-16 @types/enzyme @types/jest

配置

• jest.config.ts配置

import {Config} from '@jest/types'

export default {
  preset: 'ts-jest',
  clearMocks: true,
  coverageDirectory: "coverage",
  testEnvironment: "jsdom",
  moduleFileExtensions: ['ts', 'js', 'json', 'tsx'],
  moduleDirectories: ['node_modules', 'src'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  setupFiles: ['./test/setup.js'],
  // 引入jest-enzyme扩展断言支持
  setupFilesAfterEnv: ['./node_modules/jest-enzyme/lib/index.js'],
  globals: {
    'ts-jest': {
      // 指定ts-jest使用的tsconfig配置
      tsconfig: 'tsconfig.test.json'
    }
  }
} as Config.InitialOptions;

• tsconfig.test.config配置 需要对jsx进行支持

{
  "compilerOptions": {
    "target": "ES5",
    "types": ["jest", "jest-enzyme"],
    "allowJs": true,
    "skipLibCheck": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "react"
  }
}

总结

使用这种配置方式，便会直接利用tsc的编译能力，不需要使用babel。可以通过配置jsx来对react进行支持。相对babel更加贴近typescript。