皮皮网

1.记一次简单的源码vue组件单元测试
2.从0到1，Vue大牛的源码前端搭建——异常监控系统（下篇来啦）
3.Vite 源码学习3. package.json分析
4.element-plus源码学习日志-03

记一次简单的vue组件单元测试

       记录一些在为项目引入单元测试时的一些困惑，希望可以对社区的源码小伙伴们有所启迪，少走一些弯路少踩一些坑。源码

       了解单元测试框架，源码如Jest,源码wechat 开发源码 Mocha, Karma, Chai, Sinon, Jsmine, Vue-Test-utils等。这将帮助你理解如何进行单元测试。源码对于Vue项目，源码引入单元测试的源码大致思路已经有了，但是源码如何在正确的框架中使用Vue-Test-utils，具体位置在哪里，源码需要进一步阅读其源码。源码

       Chai和Sinon是源码kangle前台源码什么？它们是JavaScript中的测试断言库。Fakes在测试中扮演重要角色，源码比如一次调用、源码行为、测试Ajax、模拟XMLHttpRequest、模拟服务器、模拟时间等。

       关于Spy的概念，它是一个函数，能够记录所有参数、返回值、this值和函数调用抛出的网站源码wuqingyx异常。有3类Spy：匿名函数、对象的方法、用于测试函数如何处理回调。

       理解TDD（Test Driven Development）和BDD（Behavior Driven Development）之间的区别，以及“spec”在JavaScript测试中的含义。

       为何命名文件为spec.js？在JavaScript测试中，"spec"代表“Specification”，即给定特性或者必须满足的应用的技术细节。

       如何在实际项目中为聊天的文字消息组件编写单元测试？通常，测试文件放在“test”文件夹下，以.spec.js结尾。配置Karma和Webpack进行文件处理。assetc源码获取

       理解Karma配置文件karma.conf.js的作用，以及如何根据实际情况进行配置以适配Vue项目。

       意外收获：PhantomJS是一个无头浏览器，用于在终端中模拟浏览器操作。Karma-Webpack则是在Karma中使用Webpack进行预处理。

       了解Istanbul，它是代码覆盖率工具，以及Vue-Test-utils的常用API及其选项。

       理解mount和shallowMount的区别，前者只挂载当前组件实例，而后者会同时挂载当前组件实例及子组件。

       前端单元测试的nodejs隐藏源码目标是什么？应该测试哪些内容？通常，测试功能型组件、Vue插件以及二次封装的库，这些组件具有较高的复用性。

       举例说明如何为特定的组件（如上传组件、可编辑单元格组件、时间选择组件、mqtt.js、eventbus.js、monjs，以及用于处理TypeScript类型定义的@types/*等。例如，@vue/compiler-dom和@vue/compiler-sfc是Vue模板和SFC底层工具集，brotli-size则用于字符串和Buffer的压缩。devDependencies则主要为开发环境提供支持，如@babel/runtime为Babel运行时工具，jest用于测试，prettier则负责代码格式化。

       dependencies：关键库如@vue/compiler-dom负责Vue模板编译，@rollup/plugin-node-resolve用于模块定位，@types/*提供TypeScript类型支持。

       devDependencies：如jest用于编写和运行测试，postcss和less是CSS处理工具，typescript支持项目使用TypeScript，vue-router和vuex则提供路由和状态管理功能。

       这些依赖包的合理配置，使得Vite能够在高效开发的同时，确保项目的稳定性和可维护性。后续内容将继续探讨Vite的其他组件和配置。

element-plus源码学习日志-

       每日学习进阶，承上启下

       昨日探讨了input组件的使用及编码准则，今日深入剖析element-plus源码，探索新知识。

       文件定位至element-plus\packages\dialog\src\index.vue

       先看模板代码片段，引入了teleport组件，这是新增的内置组件。

       没有使用teleport时，元素作为app组件的子节点；而使用teleport后，元素变为app组件的同级节点，统一挂载于body下，to属性可指定具体id的DOM节点。

       前端展示层级对最终显示结果影响重大。在Vue 2时代，使用Vue.extend创建新实例，挂载于app同级节点，解决全局弹层的层级问题。新自定义组件简化了开发流程，优化代码。

       引入了Vue 3自定义指令，与之前版本有所调整，需进一步学习。

       注意到Vue 3支持fragments，组件不再受限于单一节点，引入新问题，需深入研究官方文档，理解其用法。

       JS代码段回顾了之前讨论过的基础知识，简要审视，复习要点。

       今日总结：学习了Vue的新内置组件teleport，具备将包含的节点挂载至指定DOM节点的功能。并了解了新版本自定义指令的调整。

       下一步规划：基于Jest为组件编写单元测试，学习Jest的基本用法、报告生成等操作，深入框架测试领域。