51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

微信登录,快人一步

查看: 745|回复: 0

[转贴] 软件测试技术之单元测试?即刻搞定!

[复制链接]
  • TA的每日心情
    无聊
    13 小时前
  • 签到天数: 919 天

    连续签到: 1 天

    [LV.10]测试总司令

    发表于 2022-5-17 11:06:18 | 显示全部楼层 |阅读模式
    前言
      如今随着一个项目业务不断壮大,重构与迭代也日趋频繁,为保证项目的稳定性与可维护性,单元测试也逐渐成为不可忽视的一环。本文将带来单元测试的介绍,有关框架选择,环境安装与书写测试用例等,内容较为简单,极易上手。
      什么是单元测试
      在计算机编程中,单元测试(Unit Testing)又称为模块测试,是针对程序模块(软件设计的最小单元)来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中,一个单元就是单个程序、函数、过程等;对于面向对象编程,最小单元就是方法,包括基类(超类)、抽象类或者派生类(子类)中的方法。
      以上是来自维基百科的解释。概括来说,单元测试是对软件中的最小可测试单元进行检查和验证。而对于 JavaScript 来说,通常也是针对函数、对象和模块的测试。
      为什么要使用它
      · 优点
      放心重构:重构某处业务代码过程中不用担心代码带来的副作用,用例会自动帮助全面测试;
      利于维护:每次迭代新功能,代码更新频繁时,保证了测试的完整性(因为之前的测试用例依然存在),系统有很好的可维护性,便于多人开发;
      快速熟悉代码:对团队的新人来说,单元测试其实是较好的文档,每个 case 都能详细地反映代码包含的具体功能和业务;
      提高代码质量:假设一个单元测试写得逻辑非常复杂,或者说一个函数复杂到无法写单元测试,那就说明模块抽取有问题,可警示自己。
      前端主流测试框架

     断言概念:就是判断源码的实际执行结果与预期结果是否一致,若不一致即抛出异常。

      知名团队使用 Jest 情况

    前端如何选择合适的框架
      · 项目需求
      与项目、编译器都需较好地兼容;
      测试快速执行;
      清晰的错误报告。
      · 成本
      学习成本;
      调试维护成。本
      相比其他框架而言,Jest 比较新,本着对待技术需要有「喜新厌旧」的精神,另外结合自身需求,百瓶前端团队使用了 Jest,结合了??Vue Test Utils??组件测试框架。功能较齐全,简单易用。另外??Vue??官方网站对 Jest 的评价是:功能最全的测试运行器。
      tips:如果写了 Mocha 的测试用例,但想迁移至 Jest 框架中,可使用 jest-codemods 进行无缝迁移。
      撸起袖子,轻松上手
      Talk is cheap,show you the code!即刻开始搭建环境。
      存在一个脚手架生成的 Vue 项目(若还未生成 Vue 项目可在创建 Vue 项目时候选择手动配置内容,在手动配置中添加 Jest 测试框架与 Vue Test Utils 工具库)。
      Jest安装
      方法一:
      首先安装 Jest,进入项目目录输入命令。


      npm install --save-dev jest

    安装 Jest 相关依赖。

    1. npm install --save-dev jest babel-jest babel-core babel-preset-env regenerator-runtime
    复制代码
     babel-jest、babel-core、regenerator-runtime、babel-preset-env安装目的是为使用 ES6 语法进行单元测试。因为 ES6 中 import 的使用在 Jest 并不支持。
      添加 .bablerc 文件:
    1.  {
    2.     "presets": [
    3.       [
    4.         "env",
    5.         {
    6.           "modules": false
    7.         }
    8.       ]
    9.     ],
    10.     "env": {
    11.       "test": {
    12.         "presets": [
    13.           "env"
    14.         ]
    15.       }
    16.     }
    17.   }
    复制代码
    建立 jest.conf.js 文件,进行配置:

    1.  module.exports = {
    2.     moduleFileExtensions: [
    3.       'js',
    4.       'json',
    5.       'vue',
    6.     ],
    7.     // 告诉 Jest 处理 `*.vue` 文件
    8.     moduleNameMapper: {
    9.       // 支持源代码中相同的`@` => `src` 别名
    10.       '^@/(.*){{content}}添加 test、script 命令,在 package.json 中添加测试单元的脚本。[/font]
    11. [font=微软雅黑][code]  {
    12.     'script': {
    13.       'test': 'jest'
    14.     }
    15.   }
    复制代码
    其中 test 的命令可以进行优化:

    1.   "test": "jest --config jest.conf.js --coverage --watch"
    复制代码
     --coverage 可以生成覆盖率报告--watch 实现单元测试监听,测试用例修改时无需再进行命令行运行,可自行监听 --config jest.conf.js 是为了解决测试 Vue 组件时候,无法找到组件模块。
      方法二:
      使用命令行npx jest --init运行。

    安装??Vue Test Utils??与??vue-jest??预处理器。
    1.   npm install --save-dev jest @vue/test-utils
    复制代码
     为告诉 Jest 如何处理 *.vue 组件文件,我们需要安装和配置 vue-jest 预处理器:

    1.  npm install --save-dev vue-jest
    复制代码
      最简配置如下,即可进行单元测试:


    注意:
      如果你使用了 Babel 7 或更高版本,你需要在你的devDependencies里添加babel-bridge。
    1.   npm install --save-dev babel-core@^7.0.0-bridge.0
    复制代码
    安装完成后,建立test文件夹,学习官方的 API 进行测试用例使用。
      在此文件夹中建立.js并引入我们需要测试的函数add:



    运行命令npm run jest

    至此项目中基础的单元测试安装与使用已经完成。
      最后
      值得思考的是,并不是所有的项目都值得引入测试框架,毕竟维护测试用例也是需要成本的。对于一些需求频繁变更、复用性较低的内容而言是极为不合适。以下三种情况是较为合适的
      需要长期维护的项目,因为他们需要功能的稳定性;2.较为稳定的项目或者项目中较为稳定的部分;3.被多次复用的地方,比如通用的组件和库函数。








    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?(注-册)加入51Testing

    x
    回复

    使用道具 举报

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

    GMT+8, 2024-3-29 22:39 , Processed in 0.065505 second(s), 25 queries .

    Powered by Discuz! X3.2

    © 2001-2024 Comsenz Inc.

    快速回复 返回顶部 返回列表