单元测试的技术方案很多,不同工具之间有互相协同,也存在功能重合,给我们搭配测试方案带来不小的困难,而且随着 ES6, TypeScript 的出现,单元测试又增加了很多其他步骤,完整配置起来往往需要很大的时间成本。我希望通过对这些工具的各自作用的掌握,了解完整的前端测试技术方案。前端单元测试的领域也很多,这里主要讲对于前端组件如何进行单元测试,最后会主要介绍下对于 React 组件的一些测试方法总结。
维基百科对于单元测试的定义:是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中,一个单元就是单个程序、函数、过程等;对于面向对象编程,最小单元就是方法,包括基类(超类)、抽象类、或者派生类(子类)中的方法。
测试的目的是为了带给我们带来强大的代码信心,如果把测试初衷忘掉,会很容易掉入测试代码细节的陷阱。一旦关注点不是代码的信心,而是测试代码细节,那么测试用例会变得非常脆弱,难以维护。
本篇解析参阅 vue3源码、崔大的mini-vue、霍春阳大佬的《Vuejs设计与实现》尽可能记录我的Vue3源码阅读学习过程。我会结合自己的思考,提出问题,找到答案,附在每一篇的底部。希望大家能在我的文章中也能一起学习,一起进步,有 get 到东西的可以给作者一个小小的赞作为鼓励吗?谢谢大家!
现在让我们正式开始,茶和图雀社区精心准备的甜品更搭哦。 在项目根目录下新建src目录,存放我们的功能代码。然后创建src/dessert.js。
vs code打开项目你会发现根目录下有一目录test/unit,里面就有一个已经生成的测试用例。
差不多两年前,我在一个创业团队中开始了一个全新的项目。用到的全都是类似Microservices,docker,react,redux这些时髦的东西。
Jest 是一款轻量的 JavaScript 测试框架,它的卖点是简单好用,由 facebook 出品。本文就简单讲讲如何使用 Jest 对 React 组件进行测试。
前端的同学需要提升编程核心内功,建立和健全算法知识体系,基础算法、数据结构、进阶算法,由浅入深讲解,透彻理解抽象算法,算法面试是关键一环,冲击大厂前端offer。
本文出自于掘金的子弈[1],原文链接 从零开始配置 TypeScript 项目[2]。
本文主要是介绍基于React+Ant Design(以下用Antd表示Ant Design)的项目,在对于自己封装的,或者基于Antd封装的公共组件的自动化测试技术的选型和实践。
如今, React 和 TypeScript 是许多开发人员正在使用的两种很棒的技术。但是把他们结合起来使用就变得很棘手了,有时很难找到正确的答案。不要担心,本文我们来总结一下两者结合使用的最佳实践。
在这篇文章中,我们将使用TypeScript和Jest从头开始构建和发布一个NPM包。
前几个月在公司用vue3 https://v3.vuejs.org/和ts写项目,想巩固一下基础,于是我想起了去年基于JavaScript和Jest搭建的刷题环境https://zhengjiangtao.cn/coding,不如,给它搞个加强版,结合Typescript和Jest https://jestjs.io/搞一个刷题环境https://zhengjiangtao.cn/coding-ts/,下面是我的一些使用心得,分享给大家。
原文链接:https://bobbyhadz.com/blog/react-typescript-cannot-find-name[1]
一般项目代码中会有不少异步 ajax 请求,例如测试下面 async.js 中的代码
在给 vemojs 做完各种测试之后,导师很快提出了新的要求,给 clousebase-cli 编写测试用例。有个问题摆在眼前:它是用 typescript 编写,所以需要配置相关环境。
前端开发的一个特点是更多的会涉及用户界面,当开发规模达到一定程度时,几乎注定了其复杂度会成倍的增长。
本指南涵盖了我们如何在 Sentry 编写前端代码, 并特别关注 Sentry 和 Getsentry 代码库。它假设您使用的是 eslint-config-sentry 概述的 eslint 规则;因此,这里不会讨论由这些 linting 规则强制执行的代码风格。
在第一讲云函数的生命周期中,我们已经提到了在云函数 Mount 阶段创建数据库连接带来的两方面好处:
关于前端单元测试,其实两年前我就已经关注了,但那时候只是简单的知道断言,想着也不是太难的东西,项目中也没有用到,然后就想当然的认为自己就会了。
原文链接:https://bobbyhadz.com/blog/react-cannot-find-namespace-context[1]
作为经验丰富的前端,经常用console.log测试代码,但是log对复杂的功能来说还是不能满足需求,所以今天就给大家介绍一款目前最为流行的测试框架——Vitest
文章链接:https://bobbyhadz.com/blog/react-create-react-app-typescript[1]
Bun 是一个现代的JavaScript运行环境,如Node, Deno。主要特性如下: 启动速度快。更高的性能。完整的工具(打包器、转码器、包管理)。
【 toBeNull 】【 toBeUndefined 】【 toBeDefined 】【 toBeTruthy 】【 toBeFalsy 】
执行 yarn jest 或者 yarn jest test/plus.spec.js 运行测试用例
温馨提示:因微信中外链都无法点击,请通过文末的 “阅读原文” 到技术博客中完整查阅版;
按照软件工程自底而上的概念,前端测试一般分为单元测试(Unit Testing )、集成测试(Integration Testing)和端到端测试(E2E Testing)。
webstorm mac中文版是WebStorm for Mac的最新本,被称为最好用的Web前端开发神器。WebStorm 新版对JavaScript,TypeScript和CSS支持更好,改进了Vue.js的体验,并为Jest集成增加了新功能。
上图标红就是相关的工程化配置,有 Linter、Tests,Github Actions 等,覆盖开发、测试、发布的整个流程。
对于初学 React 的开发者,首先要面临的问题就是如何搭建一个 React 项目。市面上的工具众多,目前最受 React 社区欢迎的是 Vite。Vite 不仅支持多种库(如 React)与TypeScript 的结合使用,还具备出色的性能。
说明: 这里使用脚手架安装项目的时候遇到了一个问题,大致可能说的是 node 版本不匹配,也就是我的版本低了,截图如下。
Vue-Test-Utils 是 Vue.js 官方的单元测试实用工具库,它提供了一系列的 API 来使得我们可以很便捷的去写 Vue 应用中的单元测试。
Vue3 跟 Vite 正式版发布有很长一段时间了,生态圈也渐渐丰富起来,作者已在多个项目中使用,总结一下:就是快!也不用担心稳定性问题,开发体验真不是一般好!还没尝试的同学可以从本文开始学习,从 0 开始手把手带你搭建一套基于 Vite + Vue3 + TypeScript 规范的前端工程化项目环境。
从2022年 Bun 的 Beta 版本发布,就早已爆火,仅一个月内,就在 GitHub 上获得了超过两万颗 Star,成为年度最火的前端项目。在今年的 9 月 8 号,由 Jarred Sumner 开发的 Bun v1.0 正式发布。本文会重点介绍 Bun 的特性和性能的测试,并且分析 Bun 为什么这么快。
React 已经诞生很久了,自从它诞生开始,围绕组件驱动形成了一个非常全面的生态,但是来自其他编程语言或者框架的开发人员很难找到要构建一个 React 系统的所有组件。如果你是来自于像 Angular 这样的框架的开发者,你可能已经习惯了框架包含了所需要的所有功能,
Weex 作为一种成熟的跨平台程序框架被运用到许多产品中,有赞也不例外。有赞零售移动端团队从 2018 年就开始使用 Weex 构建页面,据不完全统计,有赞零售移动端有超过300个页面使用到了 Weex 开发!显然,这是一个巨大的开发工程,同时我们也发现基于 JavaScript 的 Weex 开发给我们带来了诸多痛点:
很多时候,我们可能想要用 typescript 语言来创建一些模块,并提交到 npm 供别人使用,
npx create-react-app my-app --template typescript
1、背景 以前还是学生的时候,有学习一门与测试相关的课程。那个时候,觉得测试就是写 test case,写断言,跑测试,以及查看 test case 的 coverage。整个流程和写法也不是特别难,所以就理所当然地觉得,写测试也不是特别难。 加上之前实际的工作中,也没有太多的写测试的经历,所以当自己需要对组件库补充单元测试的时候,发现并不能照葫芦画瓢来写单测。一时不知道该如何下手,也不知道如何编写有效的单测,人有点懵,于是就比较粗略地研究了一下前端组件单测。 1.1 单测的目的 在频繁的需求变动中可控地保
作者 | Priscila Oliveira ,Scott Cooper 译者 | 明知山 策划 | 丁晓昀 在 Sentry,我们采用了持续交付实践,也就是说,代码一旦被合并到主分支就可以立即发布。我们因此能够快速地迭代产品,尽可能频繁地在生产环境中提供新功能、进行错误修复、配置变更和实验。我们每月合并超过 700 个 PR。自动化测试——特别是我们大型的 React 代码库自动化测试——是我们 CI/CD 流程的重要组成部分,确保我们的产品可以按照预期运行。 在这篇文章中,我们将讨论如何将我们
本轮子是通过 React + TypeScript + Webpack 搭建的,至于环境的搭建这边就不在细说了,自己动手谷歌吧。当然可以参考我的源码。
在项目开发初期,我们通常会选用主流的UI开发框架来构建应用(例如:基于 React 的 AntDesign、基于 Vue 的 ElementUI)。随着业务研发过程的推进,会逐渐出现在业务角度上有复用价值的自定义组件,如果我们把这些可复用的组件封装为一个一个独立的 Library,并发布到 npm 上,在项目组内共享,可以避免重复造轮子、便于协同开发、提升开发效率。
本期周刊视频版已在 B 站【前端食堂】同步发送,如果有喜欢看视频的堂友可以移步 B 站[2] 进行观看。
npx-cli.js –ignore-existing create-react-app . –scripts-version –typescript
对于现在的前端工程,一个标准完整的项目,通常情况单元测试是非常必要的。但很多时候我们只是完成了项目而忽略了项目测试。我认为其中一个很大的原因是很多人对单元测试认知不够,因此我写了这边文章,一方面期望通过这篇文章让你对单元测试有一个初步认识。另一个方面希望通过代码示例,让你掌握写单元测试实践能力。
领取专属 10元无门槛券
手把手带您无忧上云