前端

使用 eslint-plugin-check-file 规范 jest 下测试文件所在的文件夹命名

快下班时，同事告诉我，“你流水线挂了”，想想流水线红过夜需要发红包，立马打开合上的电脑，一顿探查发现是挂在测试覆盖率，天地良心，“测试文件明明就在那里啊”。稳住，定睛细瞧，才发现我的测试文件放在 __test__ 文件夹，而项目测试覆盖率是统计 __tests__ 文件夹里的文件，没想到是这么低级的失误，真是一脸黑线。

解决方案

项目测试框架使用的是 jest，测试文件都是就近放在当前目录下的 __tests__ 文件夹，上面的情况是我放在 __test__ 文件夹以至没被 jest 发现。这时解决问题就有两个方向了，第一种是修改 jest 配置，让它也能识别 __test__ 文件夹里面的测试文件，另一种就是把文件夹 __test__ 修改为 __tests__。作为极力追求代码整齐的程序员来说，让 __tests__ 文件夹和 __test__ 文件夹二者共存，心里有些难受，表示接受不了。但是第二种方法，每次肉眼识别差异，效率低下无意义，我就想存不存在相应的 lint 工具能自动识别这类问题，解放双眼，这样有问题的话也可以在更早的 commit 阶段得以发现。

于是，我去 Stack Overflow 上问了这样一个问题，我查看了回答里提到的所有 eslint 插件，发现都不能满足我的需求，于是我就写了新的 eslint 插件 eslint-plugin-check-file。通过如下配置其 check-file/folder-match-with-fex 规则，便能很好满足我的需求。

1
2
3
4
5
6
7
8
9
10
{
   "rules":{
      "check-file/folder-match-with-fex":[
         "error",
         {
            "*.test.{js,jsx,ts,tsx}":"**/__tests__/"
         }
      ]
   }
}

eslint-plugin-check-file 插件

eslint-plugin-check-file 插件除了有能根据文件名来限定其所在文件夹的 check-file/folder-match-with-fex 规则外，它还支持两条规则：

  • check-file/filename-naming-convention：规范文件名的命名风格，内建六种命名风格，支持自定义命名风格
  • check-file/no-index：禁止文件命名为 index

后续还计划加上规范文件夹命名风格的规则，欢迎大家尝鲜使用！

参考资料