终于理解了测试，并用 Jest 全面测试了我基于 React 的跨浏览器扩展！没有比 100% 代码覆盖率更好的感觉了。在我目前的项目（TabMerger） v2.0发布后，我决定学习/集成一些真正能提升我技能的项目。最重要的是，将这些功能添加到我的项目中，让我对开发新项目和/或重构现有项目充满热情。
这是 TabMerger 的存储库，您可以查看它来了解如何添加下面讨论的任何功能。
 |
 |
 |
|---|
您是否厌倦了搜索挤压的图标来找到您确定存在的标签？
TabMerger 简化了这种混乱，同时以高度组织化和可定制的方式提高了生产力！
只需单击一下，您就可以将所有内容放在一个公共位置，然后您可以在该位置重新排列到适当的组中，添加自定义注释等等。所有项目都存储在内部，供您稍后使用，即使您关闭浏览器窗口也是如此 - 减少内存消耗并加快机器速度。大量的分析让您随时了解情况。
如果您发现 TabMerger 有用，请考虑留下积极且有意义的评论（Chrome | Firefox | Edge）
如果您能
我将非常感激任何财务方面的...
以下是我敦促您学习的概念，因为希望它们能为您的编码生活带来同样的兴奋 - 不要陷入推迟/拖延的陷阱。
我强烈推荐Jest，因为当你使用 React (CRA) 时它可以直接使用，但你也可以使用其他测试运行器，如Mocha、Karma等。
每次更改/更新/添加某些内容时，您是否想手动测试代码的每个小功能？
是的，不用了，我更希望有一个测试脚本可以帮我自动完成这一切。而且，一旦你理解了主要概念，就会非常有成就感。这可能是这里列出的所有项目中最耗时的了。
从基础开始——单元测试
理解 Jest 和 Stryker 的覆盖率报告后，使用Jest Puppeteer添加集成测试和端到端测试，这是另一个易于与 React 集成的模块。免责声明：我尚未对 TabMerger 进行此步骤，但过去曾尝试过，非常有趣——欢迎您贡献代码😊。这应该比单元测试更简单，因为它是“黑盒测试”，无需关心内部情况（只需输入和输出），而不像单元测试那样采用“白盒测试”的方法。
以下是 TabMerger 当前测试性能的简要快照：
如你所见，使用这些测试脚本，我可以在不到20 秒的时间内，通过大约250 个测试，检查应用程序中所有文件的逻辑。这让我非常有信心，新功能不会破坏现有代码。虽然仍有一些改进空间（一些未覆盖的代码行，而且覆盖率并非 100%），但目前的状况让我可以轻松添加新功能，而无需无休止地追求 100% 的覆盖率报告——毕竟 99.5% 的覆盖率也差不多 😉。
您可以使用npm run test:all来获得这些结果。
TabMerger 还使用突变测试，目前得分超过95%（所有文件中只有 67/1499 个突变未被检测到）。
我已经将突变测试脚本与GitHub 中的矩阵构建并行化，以加快冗长的执行时间 - 从 12 小时缩短到 5 小时。
正如您在下面的文章中看到的，测试是一个相对“隐藏”的宝藏，许多开发人员并不了解，或者只是需要一个理由来开始。此外，几乎所有经验丰富的测试人员都推荐使用 Stryker 进行突变测试！
你肯定听说过linting，也知道它有多神奇，但一直没想深入研究，因为它听起来太复杂，而且几乎没有什么用处。在开始使用它之前，我也有同样的感受——让我告诉你，linting 真的太神奇了。
在你的项目中添加ESLint（即使你打算使用 TypeScript）。想象一下，在没有语法高亮的 Word 文档中写一篇很长的论文/毕业论文——你觉得自己能完美无缺吗？能立即收到任何不准确/错误的警告，难道不是件好事吗？
这正是 ESLint 在 VSCode IDE 中的用途（假设一切设置正确）。您可以根据自己的喜好配置它以遵循特定的规则。到目前为止，它修复了我代码中的很多问题——无论大小——甚至让我学习了新的 JavaScript 概念。
例如，我了解到这const意味着常量引用，而不是简单的值，所以你实际上可以有一个const数组，它的元素可以更改、添加或删除。变量则不然const。也就是说，
后端开发教程 - Java、Spring Boot 实战 - msg200.com
const arr: number[] = [];
arr.push(1) // valid
console.log(arr) // [1]
const val = 5;
val = 1; // error
以下是 ESLint 的示例：
正如您所见，说明非常清晰，您甚至可以使用 VSCode 的快速操作来访问ctrl + .
现在您已经可以使用 ESLint，您应该考虑使用StyleLint来处理您的样式文件（CSS、SASS、LESS 等）。
这有助于减少大型项目中分散在众多文件中的重复内容。StyleLint 还强制执行以下最佳标准：
此外，StyleLint 还可以检测您是否忘记在样式块之间添加空行和/或在块注释中是否有多余的空格，例如：
/* <- space
* comment
*/
TabMerger 动态地（通过使用 IDE 扩展：ESLint& stylelint）和手动地使用这两种 linting 类型：
npm run lint→ ESLintnpm run lint:style→ StyleLint手动 linting 会在命令行中生成一份报告，其中会列出所有文件中的所有错误，以便你快速找到它们（而不必逐个打开每个文件）。以下是示例：
注意：干净运行不会产生任何输出。
有了这两种检查器，您会很高兴地知道TypeScript (TS) 还以类型控制的形式提供了“linting” 。
这在任何项目上都非常有用，因为您可以快速将鼠标悬停在任何内容（函数、变量等）上，以便在 IDE 中获取更多特定类型的信息。TypeScript 也与 VS Code 完美集成。
悬停即可查看输入的信息：
TypeScript 错误如下所示：
TypeScript 的一个优点是，你可以缓慢/渐进地修改现有项目中的 JavaScript 文件，一切仍然能够正常工作——因为 TS 文件会被编译成 JS。查看TabMerger 的仓库，了解我是如何构建项目以整合并成功运行 TypeScript 的。
我仍在学习 TypeScript，在 TabMerger 中，我目前有大约 100 个地方不确定如何正确“输入” - 所以我绝不是 TypeScript 大师 - 但自从我开始使用它以来，我就没有回头。
到目前为止，我已经重构了几乎所有旧项目，以各种方式引入 TypeScript。它提供的输入信息以及迁移到 TypeScript 的过程都非常有益且实用！
习惯 TypeScript 比习惯 linting 要花更长的时间，但你很快就会发现 TS 有多么有用。
厌倦了查找目录树来了解您的相对路径import吗？
这肯定会减慢你的工作流程，而且考虑到用户/贡献者并不想仅仅为了使用你的模块而查找你的结构，这不太实用。npm/yarn 包通常会将其模块路径别名为更简单的名称，并映射到正确的路径。
要在 TS 中执行此操作，您可以将baseURL和paths选项添加到 TS 配置文件中。如果操作正确，这将允许您使用import { A } from @A/A而不是import { A } from ../components/A/A。
来自 TabMerger 文件之一的示例：
不幸的是，React 的构建脚本阻止了该paths选项tsconfig.json，因此需要采取一些措施才能使其正常工作：
npm i -D react-app-rewiredconfig-overrides.js到根目录（参见 TabMerger 的文件）alias对象与上一步文件中显示的别名匹配start: react-scripts start为，start: react-app-rewired start并对构建脚本进行相同的操作（参见 TabMerger 的文件）您还需要通过将别名及其对应的真实路径添加到属性来进行调整。jest.config.jsmoduleNameMapper
请注意，您可以使用RegExp 变量来缩短这些键/值对。
现在，你可能已经注意到，我在上面的一些图片中发布的函数有特定的注释语法。例如：
这样做是为了生成美观的文档，如这里所示。生成这些文档报告的主要模块是jsDoc (Javascript) 和typeDoc (TypeScript)。
像这样注释你的代码，可以让任何第一次访问它的人更容易理解。它还能让你记住代码中那些难以理解的部分。使用此类注释作为文档的额外好处是，它使从 JS 到 TS 的转换更加顺畅，因为你可以使用 VS Code 从注释中“推断”类型，从而自动输入函数参数和返回值的类型。
您可以看到，文档主页上仅显示特定模块。这可以通过配置文件控制，方法是在相应文件的顶部添加以下内容：
/**
* @module MODULE_NAME
*/
在TabMerger中，您可以使用以下命令生成文档报告：
npm run jsdoc（JavaScript）npm run typedoc（TypeScript）希望我的建议对大家有所帮助。我敦促大家尽快采取行动，将这些内容添加到你们的项目中。
我几乎可以保证，你会立刻对项目更加热情（前提是一切顺利）。最糟糕的情况是你无法让某个组件正常工作，或者只是觉得它没什么用。在这种情况下，你只需回到过去的美好时光即可😊。
我实际上正在寻找工作，因此有“大量”空闲时间来帮助任何对这些事情感到困惑或困惑的人。
干杯🥂
鏂囩珷鏉ユ簮锛�https://dev.to/lbragile/5-things-to-include-in-your-project-asap-2447