探索 TypeScript + Jest 开源项目的自动化测试（上）

前言

最近在做一个采用 TypeScript 语言编写的项目，测试库选择了 Jest。我跟着 Jest 文档完成了入门教程后依然不知道从何开始，主要是有以下几个问题：

1. 测试的时机是什么时候，即什么时候运行 jest；
2. 测试文件放在哪个目录下比较好，业界是不是有比较成熟的规范；
3. 测试配置文件中常用的有哪些配置以及 TypeScript 项目需要有哪些特殊的配置。

带着这些问题，我前往 Github 上寻找了 5 个用 TypeScript 编写并且使用 Jest 作为测试框架的热门项目进行研究，这 5 个项目分别是：

1. ant-design
2. mobx
3. oni
4. prettier
5. vuetify

其中，我认为 Vuetify 最有参考价值，所以本文会以 Vuetify 为例详细地分析它的测试入口和配置，其他的几个库如果有和 Vuetify 不同的地方也会指出来，从而有一个更具全局观的认识。

也希望大家在阅读本文之后，能够组织让自己满意的测试代码结构，也能够看懂 Jest 大多数配置的含义。

另外，本文还涉及以下库的一些内容，也希望能唤起大家的一些思考：

• Yarn
• Lerna
• Husky

测试入口

首先需要找到自动化测试是从哪里开始的，这里的技巧一般是看项目根目录下的 package.json 中有没有相关的脚本。很幸运，在 Vuetify 项目根目录下的 package.json 中，发现了这段代码：

{
    // ...
    "husky": {
        "hooks": {
            "pre-commit": "node scripts/warn-npm-install.js && yarn run lint && yarn lerna run test -- -- -o"
        }
    }
    // ...
}

注意 yarn lerna run test -- -- -o 这段命令，很显然这就是我要找的测试入口的线索。这段命令的作用是运行项目的 packages 目录下所有包的 test 脚本，并带上 -o 参数。

如果你不了解 Yarn 和 Lerna 这两个工具，你也许会看不懂上述的命令，这里做个简单的解释。

如果你仔细地看过 Yarn 的文档，你会发现 Yarn 是支持 yarn [--args] 的写法的，这个写法就是调用项目本地的命令行工具（即 node_modules/.bin/ 下的脚本）执行一段命令（command）。上述命令 lerna run test 就是 command，所以上述命令实际上就是调用项目本地的 Lerna 工具来执行一行命令。

细心的你也许会注意到上述命令行中存在两个 --，这又是什么意思呢？我运行了上述命令后，会发现一个这样的提示：

warning From Yarn 1.0 onwards, scripts don't require "--" for options to be forwarded. In a future version, any explicit "--" will be forwarded as-is to the scripts.

这行提示是说命令行中存在一个过时的 -- 参数语法，说明有一个 -- 是 Yarn 的老语法，新版本不用传了，但后面我们会讲到在这种场景下不得不传。

如此一来，剩下的 -- 和 -o 便是 Lerna 命令的参数了，所以上述命令实际上是调用项目本地的 Lerna 执行 lerna run test -- -o。

从 Learn 的文档可知，lerna run test -- -o 的作用是执行项目的 packages 目录下所有包中含有 test 脚本的命令（不含有的包会自动跳过），而 -- 符号可以将后面的参数传递给 test 脚本，和 Yarn 的 -- 语法一致。

这里可以回答之前的一个问题了，即为什么必须写 Yarn 的 -- 参数？我们可以想一想，如果只留一个 --，那么这个 -- 还是会被 Yarn 识别，最终导致实际运行的命令行是 lerna run test -o，这将会报错，所以两个 -- 都得保留。

还有一个思考题，就是不知道大家有没有想过这里为什么不直接写 lerna run test -- -o 而要写成 yarn lerna run test -- -- -o。我一开始也进入了这个直觉陷阱，认为一般这样写不也是调用本地的 Lerna 工具吗？后来才反应过来，那只是 npm scripts 的特性，只在 scripts 里面那么写，而这里是 husky 的配置，不能直接支持调用本地的命令行工具，需要借助 Yarn 的这个特性。于是我又去翻了翻 husky 的文档，发现里面提到如果命令要支持调用本地命令行工具执行，还需要配置 ~/.huskyrc 文件，这还不如使用 Yarn 的特性来得方便。

接下来便是寻找哪些包里面有 test 脚本，幸运地是，只有 packages/vuetify 这个包包含 test 脚本，脚本对应的命令如下：

"test": "node build/run-tests.js"

test 脚本实际执行了 build/run-tests.js 文件，于是我看了下 build 目录下的 run-tests.js，发现它针对不同系统运行了不同的测试脚本，Windows 下运行 yarn test:win32 -o，其他系统运行 yarn test:unix -o。（提示：这里的 -o 就是之前入口处带的 -o 参数）

通过 package.json 文件可以知道 yarn test:win32 -o 实际上运行的是 jest -i -o，yarn test:unix -o 实际上运行的是 jest -o（提示：当运行 yarn