Jest 的正确打开方式 -- umi-test & Jest Run It

前言：Jest 很好很强大，但每次要在一个新项目中使用它都需要做足了前戏（配置）才能正常使用。这也是让许多开发吃了闭门羹，害怕用它，也不愿意去写测试。给大家推荐 umi-test和 Jest Run It 组合，希望你看完不再为这前戏犯难。

umi-test

umi-test是在jest上面进行了一层封装，能够覆盖一些常见的js、ts场景测试，而不用再去写一个配置文件。

如果涉及到alias，module映射等，我们可以跟在jest中的使用一样，添加jest.config文件进行配置，umi-test会将该配置和自身的默认配置合并，然后传递给jest。

我们先来个无用的栗子：

// src/App.test.ts
it('is ok', () => {
  console.log('hello world');
});

运行 npx @umijs/test ，就可以马上得到结果。

如果遇到复杂的使用场景，我们先安装 pnpm i @umijs/test -D （如果是ts项目，可以安装 @types/jest支持类型提示），在scripts中添加 "test": "umi-test"，在jest.config中添加需要的alias等，再运行npm run test即可。

umi-test 支持这么一些命令：

# watch mode
$ umi-test -w
$ umi-test --watch

# collect coverage
$ umi-test --coverage

# print debug info
$ umi-test --debug

# test specified package for lerna package
$ umi-test --package name

# don't do e2e test
$ umi-test --no-e2e

Jest Run It

Jest Run It是一个VSCode插件，别看它的下载安装量不大，但是却是我用过多个Jest插件后，唯一一个留下来的。

它的使用非常简单，安装完成后，再打开我的测试文件，就会发现每个测试用例上面多了两个按钮。

左边小人是运行用例，右边的虫子是调试用例。

直接点击它们默认是使用jest，所以我们这里需要配置一下，改成umi-test的路径（如果全局安装就改成~/node_modules/.bin/umi-test）。

我们点击它就可以正常运行了。

这里还有个小技巧就是，我们可以给它带上默认运行的参数，比如 -w

如果代码里面有复杂的逻辑，我们可以点右边的小虫子，一边调试一边修改代码，这样进行TDD真不要太爽了~

小结

本篇介绍的还只是TDD的第一步，不过也是非常重要，磨刀不误砍柴工嘛。

当然比较难的还有用例的编写，这个后面我有空整理了再分享。