jest & puppeteer 单元测试 & 集成测试 单元测试,就是测试一个函数或某个代码片段,通过模拟输入确保输出符合预期 集成测试,测的是一个功能模块,比如用户注册功能,集成测试又包括UI测试,UI测试用于确保页面正常渲染 集成测试完全是用测试脚本去模拟用户操作,比如打开浏览器.点击注册链接.输入用户名密码.点击注册 UI测试 UI测试怎么确保页面正常渲染? 像素级对比 DOM 快照 像素及对比,就是首先人肉确认页面渲染正常,执行脚本对页面截个图,下次利用测试脚本截个图跟上次的截图…

Jest是Facebook推出的一款单元测试工具. 安装 npm install --save-dev jest ts-jest @types/jest 在package.json中添加脚本: “test”: "jest" 生成Jest配置文件(生成jest.config.js) npx ts-jest config:init 使用 先简单编写一个ts文件 function adds(a: number, b: number) { return a+b; } function sub(…

       jest是Facebook的一套开源的JavaScript测试框架,它集成了快照测试.断言.mock以及覆盖率报告等功能,很全面而且基本不需要太多的配置便可使用Vue-Test-Utils是Vue的官方的单元测试框架,它提供了一系列非常方便的工具,使我们更加轻松的为Vue构建的应用来编写单元测试.       这里讲的主要是Vue+Jest+Vue-Test-Utils的项目,假设现在你已经使用vue-cli3搭建了一个vue项目:   1.安装jest npm install -…

Jest和enzyme 前端单元测试工具 什么是Jest? Jest是一个令人愉悦的JavaScript测试框架,其重点是简单性. 它适用于使用以下项目的项目:Babel,TypeScript,Node,React,Angular,Vue等! 特点 零配置 快照 隔离的 很棒的api 入门 使用yarn以下命令安装Jest : yarn add --dev jest 或npm: npm install --save-dev jest 或者全局global安装 例子 function sum(a,…

今天,我们要讲的是 Jest 单元测试的入门知识. 为何要进行单元测试? 在学习 Jest 之前,我们需要回答一个问题:为何要进行单元测试?编写单元测试可以给你带来很多好处: 将测试自动化,无需每次都人工测试. 变更检查,当代码发生重构,可以及时发现,并做出相应的调整. 列举测试用例,可以帮你了解所有的边界情况. 当作文档,如果你的测试描述足够详细,生成的测试报告甚至可以当作文档. -- 总之,单元测试会让你的生活更加美好. 使用 Jest 进行单元测试 编写测试通常都会基于某个测试框架,在众多…

目前的项目已经维护了挺久,由于客户要求,我们要为项目加上单元测试,挑选一番后选择了Jest(配置简便,开箱即用),下面记录了此次为项目添加Jest作为单元测试的经历. 安装Jest 1. 在项目目录下,执行命令vue add @vue/cli-plugin-unit-jest,这个命令会帮我们把相关的配置都配好,相关的依赖都装好,还会帮我们生成一个jest.config.js文件,网上说还会生成tests文件夹,我试的没有,另外还会帮你在eslintr.js文件下配置好jest需要的配置. 一开…

使用 Jest 进行单元测试时出现如下问题: Jest did not exit one second after the test run has completed. This usually means that there are asynchronous operations that weren't stopped in your tests. Consider running Jest with `--detectOpenHandles` to troubleshoot this…

React Native移动框架功能研究 此篇只研究React Native框架的功能. 一.React Natvie是什么 React Native是使用React(或者说JS)来开发原生APP的框架. 二.React Native的愿景 1.提供一直的跨平台开发原生APP的一直体验. 2.使用JS和React提高跨平台开发效率. 三.React Native提供的特性 1.提供了丰富的原生组件,可以是APP获得平台一致的视觉效果和体验,同时获得最佳的性能和流畅性. // iOS & Andr…

今天,我们要讲的是数据结构与算法中的栈. 栈的简介 栈是什么?栈是一个后进先出(LIFO)的数据结构.栈有啥作用?栈可以模拟算法或生活中的一些后进先出的场景,比如: 十进制转二进制,你需要将余数倒序输出. 二叉树的先中后序非递归遍历都用到了栈. 在生活中,栈可以模拟煤炉与蜂窝煤等场景. 用 JavaScript 写一个栈类 对于 JavaScript 工程师来说,没必要在开发中实现一个栈.因为 JavaScript 的内置对象 Array 已经实现了栈的相关方法.不过,好的程序员不能光用别人设计…

概述 Kibana是一个针对Elasticsearch的开源分析及可视化平台,用来搜索.查看交互存储在Elasticsearch索引中的数据.它操作简单,基于浏览器的用户界面可以快速创建仪表板(dashboard)实时显示Elasticsearch查询动态. 安装部署kibana kibana需要64位操作系统,并且需要先安装Elasticsearch,运行Elasticsearch又需要先安装java. 参考资料: Elasticsearch guide Kibana guide 下面以mac…

昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue({ el: '#app' }) 2. 注册局部组件 var app = new Vue({ el: '#app', components:{ 局部组件名:{ template: `...` } } }) 3. 传值 1. 父组件 --> 子组件 1. 父组件通过 v-bind:变量='值' 2.…

以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 使用 TypeScript 的收益 使用 Mocha/Jest 进行单元测试 [实现中] 使用 Webpack 打包基础设施代码已经很大程度上解决了生产力,但日益复杂业务和逻辑仍然让前端陷入"动态一时爽.重构火葬场"的笑谈,TypeScript 为解决这个问题而来. 在本章节我们使用 TypeScript 完成一个类…

以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 使用 TypeScript 的收益 使用 Mocha/Jest 进行单元测试 [实现中] 本文是关于前端项目模板化的第2部分 现状 实际项目远远比示例使用的 myGreeting 复杂,比如 为了提高可维护性我们将项目折成了许多功能模板: 我们希望使用 Promise 等语法等,但是顾忌目标环境的支持能力: 可能依赖了多个第三…

以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 使用 TypeScript 的收益 使用 Mocha/Jest 进行单元测试 [实现中] 本文是关于前端项目模板化的第1部分 使用 Docker 搭建私有NPM仓库 关于 Docker 的使用不在本文之中,请自行参考其他文档. 经过测试, keyvanfatehi/sinopia 可用. 将 docker image 拉下来…

我应该选择 Angular 还是 React?现在JS框架两强的格局让许多开发者选择起来很纠结.无论你是一个正在思考如何入门的新手,还是一个为下个项目挑选框架的设计者,或是一个架构师为公司做长远的规划,你都有可能从学习这个主题中受益. 为了节省你的时间,提前做出如下声明:在哪个框架更好这个问题上,本文不会给你一个明确的答案.但是,不想其他类似主题的文章.我不能告诉你答案,是因为一项特定的技术是否适合你的开发环境和使用场景取决于多种因素. 由于不能直接回答这个问题,我们会尝试从其他的方面进行解释.…

几个月前,我的任务是将我们组的 Vue.js 项目构建配置升级到 Webpack 4.我们的主要目标之一是利用 tree-shaking 的优势,即 Webpack 去掉了实际上并没有使用的代码来减少包的大小.现在,tree-shaking 的好处将根据你的代码库而有所不同.由于我们的几个架构决策,我们从公司内部的其他库中提取了大量代码,而我们只使用了其中的一小部分. 我写这篇文章是因为恰当地优化 Webpack 并不简单.一开始我以为这是一种简单的魔法,但后来我花了一个月的时间在网上搜索我遇到…

什么是vue脚手架?   他是一个快速构建vue项目的工具,通过他,我们可以将vue所需要的文件安装完成. vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-dev-server的支持, 相当于启动了一个请求服务器,给你搭建了一个测试环境,只关注开发就OK.   安装vue-cli脚手架 安装脚手架需要用cnpm(淘宝镜像)安装,直接用pip安装会失败,安装cnpm命令如下:  npm install cnpm -g --registry=https:/…

百度网盘链接:https://pan.baidu.com/s/1xshLRO3ru0LAsQQ0pE67Qg 提取码:bh9f   阶段一:课程设计及前端创建脚手架开发 第1周   需求分析和架构设计:做什么,如何做? 开工之前,先来看看我们到底要做一个什么项目,有哪些功能.然后站在上帝视角,从整体的架构层面,该如何设计该项目.   课程安排: 1.需求分析,到底要做一个什么产品2.项目设计,多个项目之间的关系3.数据模型设计,各项目之间的数据流转过程4.后台管理需求,管理员要管控什么内容5.统…

写在前面 早年间有幸在Raychee哥门下当小弟,学到两把刷子.在编程路上,他的很多思想深深影响了我,比如笔者今天要分享的主题.在程序开发中,有个utils包,叫做实用程序包,程序员们会把项目中通用的东西抽离出来放到这个里面,这有利于项目工程化的落地,提高项目的可维护性,减少代码冗余,锻炼编码能力,提高编码效率,理解编程思想. 在开始之前,我们先思考下,创建一个规范的项目我们需要关注哪些点?我觉得吧,第一个是创建信息的完整性,一个信息完整的项目可以引导读者与作者交流与合作,这个在后面的packa…

React 入门手册 零.前言 一.React 和 UI 设计简介 二.创建组件 三.管理用户交互 React 全栈项目 零.前言 一.使用 MERN 释放 React 应用 二.准备开发环境 三.使用 MongoDB.Express 和 Node 构建后端 四.添加 React 前端来完成 MERN 五.从一个简单的社交媒体应用开始 六.通过在线市场练习新的 MERN 技能 七.为市场扩展订单和支付 八.构建媒体流应用 九.定制媒体播放器并改进 SEO 十.基于 Web 的虚拟现实游戏开发 十…

一.写在前面 先说下本文的背景,这是一道笔者遇到的Node后端面试题,遂记录下,通过本文的阅读,你将对楼下知识点有所了解: midway项目的创建与使用 typescript在Node项目中的应用 如何基于Node自身API封装请求 cheerio在项目中的应用 正则表达式在项目中的应用 单元测试 二.midway项目的创建和使用 第一步: 输入命令**npm init midway**初始化midway项目 第二步:选择**koa-v3 - A web application boilerpl…

原文:5 steps of test-driven development https://developer.ibm.com/articles/5-steps-of-test-driven-development/ 作者 Grant Steinfeld 发表于 2020年2月6日 在这篇文章中,我将向你介绍TDD的基础概念,如果你是敏捷开发实践者,那么TDD将是你开发生涯中的最佳实践.学习TDD是什么,理解TDD的基本流程并且知道怎么用单元测试实现TDD.你将会理解为什么在开发过程中需要使用T…

前言 基于React+Ant Design(以下用Antd表示)的项目,在对于自己封装的,或者基于Antd封装的公共组件的自动化测试技术的选型和实践. 背景 随着前端项目越来越大,业务逻辑日益繁杂,协同开发的同事也越来越多,迭代频繁,许多页面有一些相似的功能,会复用一些组件,这些组件被剥离出来,一般放在component文件夹下,大家共同维护,这时会出现一些常见问题: 从代码层面看,我们必须保证当前组件的质量,即当前业务的正常使用 在新需求下,旧组件如果能满足新需求50%以上的功能,应当升级旧组…

为什么要做单元测试 作为一个前端工程师,我是很想去谢单元测试的,因为每天的需求很多,还要去编写测试代码,感觉时间都不够用了. 不过最近开发了一个比较复杂的项目,让我感觉一旦项目大了.复杂了,而且还是多人维护一个应用,编写测试代码, 还是很有必要的.毕竟这样做完之后,后边的维护会轻松很多. 单元测试 测试代码的最小单元,一个函数就是一个单元 测试工具 主要用到的测试工具是 jest 和 enzyme jest . enzyme 介绍 jest 是 facebook 发布的一个开源的,基于 jasm…

标注: 首先这并不是一篇完整的关于Jest的教程,只是个人在接触jest学习的一点随手笔记,大部分内容都是对官方文档的一些翻译. ------------------------------------------------------------------------------------------------------------------------------------------ What's Jest Jest是Facebook开发的一个对javascript进行单元测…

引入jest需安装的基础插件: 基础插件 @babel/core 编译工具核心模块包 @babel/preset-env 编译工具,支持es2015特性的编译打包工具包 babel-jest 对.jsx..js文件进行转义的包工具. jest jest单元测试模块包 引入jest的相关配置: jest.config.js 若无jest.config.js,则执行jest --init(初始化jest的配置文件): 修改: moduleNameMapper: { "^@/(.*)$":…

本文介绍:1.vue-cli3下jest环境的搭建2.vue组件基本的测试方法 环境配置 vue-cli3 的插件使安装流程变得格外简单,通过 vue ui 启动可视化管理系统,在插件栏,点击 ‘添加插件’,搜索 @vue/cli-plugin-unit-jest,点击安装就可以了,对应命令行的 vue add @vue/cli-plugin-unit-jest 命令:这个过程实际上是包含了安装和调用两个步骤,并且会把相关的依赖一并安装进来,这样就不需要自己一个一个的安装每个依赖了.     安…

在VS Code中调试Jest单元测试 添加调试任务 打开 vscode launch.json 文件,在 configurations 内加入下面代码 "configurations": [ { "name": "Jest Debug AllFile", "type": "node", "request": "launch", "protocol"…

Jest 命令行窗口中的指令 在学习Jest单元测试入门的时候,给Jest命令提供了一个参数 --watchAll, 让它监听测试文件或测试文件引入的文件的变化,从而时时进行测试.但这样做也带来一个问题,只要改变一点内容,Jest就会把所有的测试都跑一遍,有点浪费资源.有没有可能对--watchAll模式进行进一步的优化?在命令窗口中执行npm run test 看一看就知道了, 测试完成后,你会发现还有很多提示(Watch Usage),这些就是对--watchAll模式的优化 Press f…

目录 Vue 单元测试 mocha+jest jest 实例 mocha expect方法断言 示例代码 Vue 单元测试 官网:https://vue-test-utils.vuejs.org/zh 定义: 单元测试是用来对一个模块.一个函数或者一个类来进行正确性检验的测试工作. 指令: package.json文件 "test:unit": "vue-cli-service test:unit" 测试驱动开发(TDD:Test-Driven Developmen…