背景

最近在研究和开发基于Vue3.0的组件库。组件是使用tsx编写的，在配置单元测试的过程中遇到一些问题，特此记录。

ts-jest 还是 babel-jest？

想要在Jest中运行TS代码的单元测试，目前（2021-12-26）有两种方案可供选择：

1. 使用@babel/preset-typescript，配合babel-jest，@babel/core和@babel/preset-env。
2. 使用ts-jest。

主要对比的地方如下：

1. @babel/preset-typescript提供的Typescript支持是纯转译的，也就是说使用Babel作为Jest的transformer，在运行单元测试时不会检查类型是否正确。而使用ts-jest运行单元测试时，文件在编译过程中会一并检查类型。
2. @babel/preset-typescript方案还有一些小缺点，例如不支持namespace，不支持const enum，不能做declaration merging，等等。

因此，站在面向未来的视角，使用ts-jest是更合适的选择。当然，如果你的项目不是纯Typescript编写，那么你仍需使用babel-jest。

参考资料：Babel7 or TypeScript

如何配置？

下面介绍如何给一个基于tsx编写的Vue 3项目配置Jest单元测试框架。

1. 安装依赖

pnpm i -D jest ts-jest @types/jest @vue/test-utils

• jest：测试框架本体
• ts-jest：Typescript transformer，将Typescript代码转为Jest能读懂的Javascript代码。同时检查类型。
• @types/jest：Jest的类型声明。
• @vue/test-utils：vue的测试套件库。

2. 在tsconfig.json的默认配置上进行修改

{
  ...,
  "compilerOptions": {
    ...,
    "jsx": "react",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
  }
}

• jsx选项指示Typescript编译器遇到JSX代码时应该如何处理；默认为preserve，原样保留JSX代码。但因为Jest无法运行JSX代码，因此需要配置为react进行转译。
• jsxFactory选项可以修改编译JSX时使用的工厂函数。这里需要修改为h，这样才能使用Vue自带的h函数来将JSX代码编译成Vue Runtime可运行的代码。否则默认会使用createElements，这是React的函数。
• jsxFragmentFactory选项和jsxFactory同理，但处理的是Fragment的情况。参考React Fragment和Vue Fragments。

3. 生成jest.config.js并进行修改

npx ts-jest config:init

你可以根据你的需求选择预置的配置模版。查看ts-jest 文档获取更多信息。

根据你的需要配置testEnvironment选项。如果你测试的是前端项目，配置成jsdom。默认是node。

最小配置Demo

这里提供了一个（尽量）最小配置的Demo，以供参考。
vue3-tsx-jest-minimal-config - Github