写在前面使用 react hook 来做公司的新项目有一段时间了，大大小小的坑踩了不少。由于是公司项目，因此必须要编写单元测试来确保业务逻辑的正确性以及重构时代码的可维护性与稳定性，之前的项目使用的是 react@15.x 的版本，使用 enzyme 配合 jest 来做单元测试毫无压力，但新项目使用的是 react@16.8 ，编写单元测试的时候，遇到不少阻碍，因此总结此篇文章算作心得分享出来。 配合 enzyme 来进行测试首先，enzyme 对于 hook 的支...
原文发布于2017年7月，为保证能正常运行，其中部分命令进行了调整。 当时TypeScript版本为2.x，但依旧具有借鉴意义。单元测试能限制你库中Bug的「生长」。随着编写的库越来越大，你不能总是手工测试每个特性。但你可以使用单元测试来测试每个特性，并且编写起来并不难。下面展示如何在Typescript中设置单元测试! 步骤1：安装用于单元测试的包 单元测试assert(推断)代码中一些属性。例如你有一个方法add(x,y)，其应该正确地将x和y相...
Karma Karma是一个测试工具，能让你的代码在浏览器环境下测试。代码可能是设计在浏览器端执行的，在node环境下测试可能有些bug暴露不出来（比如要做样式的测试），如果你的代码只会运行在node端，那么你不需要用karma。 vue-cli3 结合karma 经过查找搜索到vue-cli-plugin-unit-karma插件, 集成vue-cli3与karma，但是结果不那么完美，执行的时候还是报错。不过功夫不负有心人，终于找到解决方法，步骤如下 安装依赖npm install --sa...
动机 单元测试能避免出现一些代码运行结果与预期不符的错误，通常是一些比较低级但又难以发现的问题。粗心且懒，在每次调整之后，需要不断地检查代码，反复去走流程。担心由于自己的改动而导致了逻辑上的错误。而这里面的一大部分工作其实可以让单元测试来完成。有了单元测试之后，可以对代码本身形成一种规范。如果在进行单元测试过程中发现自己的一些代码不方便进行测试，那么你可能需要重新审视这些代码，看是否有一些设计上不合...
由于路由通常会把多个组件牵扯到一起操作，所以一般对其的测试都在 端到端/集成 阶段进行，处于测试金字塔的上层。不过，做一些路由的单元测试还是大有益处的。 对于与路由交互的组件，有两种测试方式： 使用一个真正的 router 实例mock 掉 $route 和 $router 全局对象因为大多数 Vue 应用用的都是官方的 Vue Router，所以本文会谈谈这个。 创建组件我们会弄一个简单的 <App>，包含一个 /nested-child 路由。访问 /nested-chil...
Vue.js是一个JavaScript框架，可用于构建Web应用程序的前端框架。特别是在创建复杂功能时，对于每个项目，有必要在我们的应用程序中查看所有内容，并检查它是否符合预期。然而，对于大型项目，每次新的更新后，检查每个功能将变得很麻烦。因此，我们可以创建可以一直运行的自动化测试，并保证我们的代码可以正常运行。在本文中，我们将为VueJS创建一些简单的单元测试。 要进行测试，我们将先制作一个基本的待办事项列表组件。我们将...
最近领导对前端提出了新的要求，要进行单元测试。之前使用vue做了一个快报名小程序的pc端页面，既然要做单元测试，就准备用这个项目了，之前有些react的经验，vue还是第一遭 vue-cli3.0单元测试方面更加完备，就先升级到了cli3.0，因为项目是用typescript写的，需要ts-jest,得到jest的配置如下 {"jest": {"moduleFileExtensions": ["js","jsx","json","vue","ts","tsx"],"transform": {"^.+\\.vue$": "vue-jest",".+\\.(css|styl|l...
从网上找了很多例子关于单元测试，都是如何新建项目的时候的添加单元测试，用vue-cli中怎么添加，但是我的项目已经生成了，不能再一次重新初始化，这时如何添加单元测试，这里面遇到了好多坑，写在这里记录一下心得。 1、用vue-cli生成一个新的项目，把单元测试需要的文件直接复制到你的项目中 vue init webpack vuetest2、安装Karma+Mocha模块，这个模块依赖比较多，我在遇到了坑，解决问题半天发现缺少了某个模块，在这里全部列出...
从网上找了很多例子关于单元测试，都是如何新建项目的时候的添加单元测试，用vue-cli中怎么添加，但是我的项目已经生成了，不能再一次重新初始化，这时如何添加单元测试，这里面遇到了好多坑，写在这里记录一下心得。 1、用vue-cli生成一个新的项目，把单元测试需要的文件直接复制到你的项目中 vue init webpack vuetest 文件下载地址 源代码Github链接2、安装Karma+Mocha模块，这个模块依赖比较多，我在遇到了坑，解决问题半天发现...
最近做了一次关于vue组件自动化测试的分享，现在将vue组件单元测试环境搭建过程整理一下。这次搭建的测试环境和开发环境隔离，所以理论上适用所有使用vue的开发环境。 准备 这篇文章的重点在于搭建测试环境，所以我随便写了个webpack的vue开发环境。 代码地址：https://github.com/MarxJiao/vue-karma-test 目录结构如下目录结构app.vue和child.vue代码app.vuechild.vue运行效果如下： 运行效果测试环境搭建 注意：这里使用的是w...
书接上文，karma+webpack搭建vue单元测试环境介绍了vue单元测试环境搭建及查看源文件的测试覆盖覆盖率。今天来说一下vue单元测试思路和case的写法。测试框架使用jasmine，语法参考。 代码地址：https://github.com/MarxJiao/vue-karma-test/tree/spec-demo测试关注点 对于vue组件，单元测试测试主要关注以下几点： vue组件加载后，各数据模型是否符合预期定义的方法是否可用filter是否可用带有props的组件，数据能否正常传递异步更...
在使用vue-cli创建项目的时候，会提示要不要安装单元测试和e2e测试。既然官方推荐我们使用这两个测试框架，那么我们就动手去学习实践一下他们吧。简介 Karma Karma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试。换句话说，它是一个测试工具，能让你的代码在浏览器环境下测试。需要它的原因在于，你的代码可能是设计在浏览器端执行的，在no...
前言 对于NodeJS, assert模块提供了一系列的断言测试,其实这个模块主要倾向于内部使用,但是也能被用于项目中, 可以通过require(‘assert)的方式引入，下面本文将给大家介绍关于Node.js用断言模块assert进行单元测试的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 方法如下： 首先先引入断言assert模块 var assert = require(assert);1.assert(value, message), assert.ok(value, [message]) //判...
前言 最近发现一个问题，vue-cli 提供的官方模板确实好用。但一直用下来手贱毛病又犯了，像穿了别人的内衣，总感觉不舒服。 所以有机会就瞎倒腾了一遍，总算把各个流程摸了一把。这里分享一下配置带覆盖率的单元测试。分享出来供大家参考学习，话不多少了，来一起看看详细的介绍： 一、文件结构 基本的文件结构。 ├─src │ ├─assets │ ├─components │ ├─app.vue │ └─main.js ├─test │ └─unit │ ├─coverage │...
开发者们都一致认为单元测试在开发项目中十分有好处。它们帮助你保证代码的质量，从而确保更稳定的研发，即使需要重构时也更有信心。 测试驱动开发流程图 AngularJS的代码声称其较高的可测性确实是合理的。单单文档中列出端对端的测试实例就能说明。就像AngularJS这样的项目虽然都说单元测试很简单但真正做好却不容易。即使官方文档中以提供了详尽的实例，但在我的实际应用中却还是很有挑战。这里我就简单示范一下我是怎么操作的吧...