2. jest-编译器配置

2.编译器

接上篇 1. jest hello world（创建实践项目）

像hello world这种简单的基础js是可以直接运行的，但实际开发中都会用一些新特性语法和typescript等，这些就需要用到编译器了，最常用的编译器有Babel和TSC

我们用的是ts，这里就先以tsc为例了

安装typescript

yarn add -D typescript@4.6.4 

初始化 TypeScript 的配置：

npx tsc --init

在根目录创建了一个 tsconfig.json 文件

安装 ts-jest

yarn add -D ts-jest@27.1.4

yarn add -D @types/jest@27.4.1 # 安装对应的 Jest 类型声明包，版本跟jest大版本保持一致就行了

注意， ts-jest 一定要和 jest 的大版本一致！ 比如 27 对 27，或者 26 对 26，否则可能会有兼容问题

在 tsconfig.json 里types字段加上 jest 和 node 类型声明：

{
  "compilerOptions": {
    "types": ["node", "jest"]
  }
}

在 jest.config.js 里添加一行配置：

module.exports = {
  preset: 'ts-jest',
  // ...
};

把 sum.js 改成 sum.ts：

// sum.ts
const sum = (a: number, b: number) => {
  return a + b;
}

export default sum;

把 sum.test.js 改成 sum.test.ts：

import sum from './sum';

describe('sum', () => {
  it('做加法', () => {
    expect(sum(1, 1)).toEqual(2);
  });
})

路径别名

路径简写/别名，这个是我们项目中的标准用法，你在tsconfig.json配置别名后，你再运行测试命令，会发现import导入的地方都报错了。这里就是jest它不认识这个路径别名，解决办法就是在jest.config.js配置一下moduleNameMapper字段

// tsconfig.json

{
  "compilerOptions": {
  ...
    "baseUrl": ".",
    /* Specify the base directory to resolve non-relative module names. */
    "paths": {
      "@/*": [
        "./*"
      ],
      "@src/*": [
        "./src/*"
      ],
      "@utils/*": ["./src/utils/*"]
    },
    ...
  }
}

// jest.config.js
modulex.exports = {
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/$1",
    "^@src/(.*)$": "<rootDir>/src/$1",
    "^@utils/(.*)$": "<rootDir>/src/utils/$1",
  },
}

这里别名解决了问题，不过不够优雅，简单查了一下可以使用ts-jest/utils提供的pathsToModuleNameMapper从tsconfig.json中统一获取，不过我试了一下报错了，暂时没详查

编译器这里也还有其他的，如esbuild 和 swc等，用到可以再详查