单元测试(jest):理解、安装、使用

news2024/12/26 2:24:36

一、理解单元测试的重要性

bug发现在开发阶段,成本很低,
如果发现在生产环境,成本很高,
如果是关键时刻,决定人生命运,决定企业发展。

从技术的角度讲,有效的提高代码的健壮性,有效的增加代码的可维护性,对于后期的代码重构是必要条件。

从团队的角度讲,开发人员的代码经过完整的单元测试,可以有效的减少测试成本,维护成本,运维成本,运营成本。

不要存在bug不会被发现的侥幸心理,我的经验,bug不是在开发阶段发现就是在测试阶段发现,不是在测试阶段发现就是在生产环境被用户发现。终究会暴露,越早越好。

写了单元测试,我们可以有信心(有依据)的告诉用户我的程序是多么的健壮。
写了单元测试,我们可以有效的培养自己做人、做事的高度。
写了单元测试,是我们工匠精神的体现。

二、jest与项目环境介绍

2.1、Jest:Facebook 的一套开源的 JavaScript 测试框架, 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具,是一款几乎零配置的测试框架。

2.2、环境:vue3 + ts + vite2 + pinia + jest + pnpm

三、jest单元测试实践

3.1、安装

pnpm add babel-jest@latest jest@latest ts-jest@latest -D 
pnpm add @babel/core @babel/preset-env babel-plugin-transform-es2015-modules-commonjs @vue/test-utils @vue/vue3-jest jest-transform-stub @types/jest -D

jest:提供单元测试能力
ts-jest:Typescript 开发语言的预处理器
@vue/test-utils:对 Vue 组件进行测试(Vue 官方提供)
@vue/vue3-jest:将 Vue SFC(单文件组件)转换为 Jest 可执行的 JavaScript 代码
babel-jest:将非标准 JavaScript 代码(JSX/TSX)转换为 Jest 可执行的 JavaScript 代码
@babel/preset-env:提供测试时最新的 JavaScript 语法的 Babel Preset
@babel/preset-typescript:提供测试时TypeScript 语法的 Babel Preset
@vue/babel-plugin-jsx:提供测试时在 Vue 中使用 JSX/TSX 语法的 Babel Plugin
@vitejs/plugin-vue-jsx:提供开发时在 Vue 中使用 JSX/TSX 语法的 Vite Plugin
jest-transform-stub:将非 JavaScript 文件转换为 Jest 可执行的 JavaScript 代码

 

3.2、根目录新建jest.config.js

export default {
    preset: 'ts-jest',
    roots: ['<rootDir>/tests/'],
    clearMocks: true,
    moduleDirectories: ['node_modules', 'src'],
    moduleFileExtensions: ['js', 'ts', 'vue', 'tsx', 'jsx', 'json', 'node'],
    modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'],
    testMatch: [
      '**/tests/**/*.[jt]s?(x)',
      '**/?(*.)+(spec|test).[tj]s?(x)',
      '(/__tests__/.*|(\\.|/)(test|spec))\\.(js|ts)$',
    ],
    testPathIgnorePatterns: [
      '<rootDir>/tests/server/',
      '<rootDir>/tests/__mocks__/',
      '/node_modules/',
    ],
    transform: {
      '^.+\\.ts?$': 'ts-jest',
      '^.+\\.vue$': '@vue/vue3-jest',// 使用 vue-jest 帮助测试 .vue 文件
      '^.+\\.(js|jsx)?$': 'babel-jest',// 遇到 js jsx 等转成 es5
      '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',// 遇到 css 等转为字符串 不作测试
    },
    transformIgnorePatterns: ['<rootDir>/tests/__mocks__/', '/node_modules/'],
    // A map from regular expressions to module names that allow to stub out resources with a single module
    moduleNameMapper: {
      '\\.(vs|fs|vert|frag|glsl|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
        '<rootDir>/tests/__mocks__/fileMock.ts',
      '\\.(sass|s?css|less)$': '<rootDir>/tests/__mocks__/styleMock.ts',
      '\\?worker$': '<rootDir>/tests/__mocks__/workerMock.ts',
      '^/@/(.*)$': '<rootDir>/src/$1',
    },
    testEnvironment: 'jsdom',
    verbose: true,
    collectCoverage: false,
    coverageDirectory: 'coverage',
    collectCoverageFrom: ['src/**/*.{js,ts,vue}'],
    coveragePathIgnorePatterns: ['^.+\\.d\\.ts$'],
  }

3.3、根目录新建babel.config.js

module.exports = {
    presets: [
        [
            "@babel/preset-env",
            {
                targets: {
                    node: "current"
                }
            }
        ]
    ],
    plugins: ["transform-es2015-modules-commonjs"]
  }

3.4、package.json

 "unit:test": "jest"

3.5、根目录创建tests文件,用来放单元测试文件

3.6、创建一个utils

src/utils/index.ts

  // 数字千位分隔显示123456 =》123,456
  export const formatNumber=(value: string) =>{
    value += '';
    const list = value.split('.');
    const prefix = list[0].charAt(0) === '-' ? '-' : '';
    let num = prefix ? list[0].slice(1) : list[0];
    let result = '';
  
    if (num.length > 3) {
      result = `,${num.slice(-3)}${result}`;
      num = num.slice(0, num.length - 3);
    }
  
    if (num) {
      result = num + result;
    }
  
    return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;
  }

3.7、创建utils的单元测试

tests/units.spec.ts

import {formatNumber} from '../src/utils/index'
test('格式化数字123456显示为123,456', () => {
  expect(formatNumber('123456')).toBe('123,456');
})

3.8、运行pnpm unit:test

pnpm unit:test

测试通过

四、过程记录

4.1、

 解:我理解,我项目是vite项目,不是vue-cli项目,不能使用这个命令安装jest

4.2、

 解:

pnpm add @types/jest

4.3、

解:jest升级版本超过27出现的问题

pnpm add jest-environment-jsdom

 javascript - 将 Jest 升级到 v28 - 找不到错误测试环境 jest-environment-jsdom - 堆栈内存溢出

4.4、另外一个项目尝试使用jest遇到问题如下,未解决

处理require is not defined in ES module scope, you can use import instead报错

pnpm add @babel/plugin-transform-modules-commonjs

package.json增加配置

"babel": {
    "plugins": [
      "@babel/plugin-transform-modules-commonjs"
    ]
  }

尝试了一些方法,没有成功,,后来更改了jest.config.js配置,避免了这个问题 

4.5、

vue-cli项目可以使用如下命令增加jest单元测试能力:

vue add @vue/cli-plugin-unit-jest

未测试 

4.6、

记得之前创建项目的时候可以选择测试工具,这里我们也尝试一些,没有发现,所以我们自己安装jest

pnpm create vite

亲测,新建项目,没有选择测试工具的选项,,如果后续有发现再补充

五、欢迎交流指正,关注我,一起学习。

参考链接:

标签[ts-jest] 最普遍问题 - 堆栈内存溢出

好文-vue3+vite+jest配置 单元测试总结_火辣辣-的博客-CSDN博客_vite 单元测试

@babel/plugin-transform-modules-commonjs · Babel 中文网

vue3 + vite + typescript + eslint + jest 项目配置实践-技术圈

关于Vue中用jest测试_城北的徐公的博客-CSDN博客_vue-jest

Vue3项目实践jest,学会了升职加薪(上篇)_梅花十三儿的博客-CSDN博客

vite + vue3 + ts + jest 测试 - boyyang - 博客园

Jest入门文档 - 掘金

【前端测试】第0章 - 为什么要做单元测试?_哔哩哔哩_bilibili

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/11854.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

GO语言集成开发工具环境JetBrains GoLand 2022

JetBrains GoLand 2022是一款专业的GO语言编程软件。JetBrains GoLand支持编码辅助功能&#xff0c;IDE会分析你的代码&#xff0c;然后在符号之间寻找连接。提供代码提示&#xff0c;快速导航&#xff0c;灵活的错误分析能力以及格式化和重构功能。JetBrains GoLand 2022 强大…

docker安装es+mac安装Kibana工具+es查询语法笔记

一、docker安装es 1、下载镜像 docker pull elasticsearch:7.9.0下载完后&#xff0c;查看镜像 docker images​​ 2、启动镜像 docker network create esnetdocker run -d --name es -p 9200:9200 -p 9300:9300 --network esnet -e "discovery.typesingle-node&…

图解CentOS7集群时钟同步chronyd

文章目录概述图步骤1、修改时区2、安装chrony3、选1台机作为时钟服务器4、其他机器同步时间概述 对于物理机集群&#xff0c;需要使用统一的时间&#xff0c;本文使用时钟同步技术来实现 图 图解 默认的 外部网络的 时钟服务器 在国外&#xff0c;速度较慢 0.centos.pool.n…

(表格固定尾列)bower安装的相关问题

遇到需求固定表格尾列&#xff0c;尾列是操作&#xff08;查看&#xff0c;删除&#xff09;这些 尝试了css&#xff0c;js&#xff0c;jquery&#xff0c;插件&#xff0c;layui&#xff0c;elementui各种都没用 freeze-table&#xff08;一个固定表格插件&#xff09; npm i…

【父母必知】呼吸过敏知多少

“吃完鸡蛋后全吐了&#xff0c;是过敏吗&#xff1f;”“湿疹怎么不经意间又出现了&#xff0c;到底吃了什么”“咳嗽总是不好&#xff0c;都说我们是过敏性咳嗽&#xff0c;对什么过敏&#xff1f;”“小时候&#xff0c;湿疹肠绞痛跑到医院&#xff0c;现在鼻炎哮喘还跑到医…

计算机对字节的七种操作

计算机对字节的处理有七种&#xff1a;复制&#xff0c;左移&#xff0c;右移&#xff0c;非&#xff0c;与&#xff0c;或&#xff0c;异或。本篇将回顾一下这几种操作的具体底层实现 四种常见的门结构 到目前为止&#xff0c;我们已经使用了NAND、AND和NOT门。我们需要定义另…

基于soft-RoCE运行OSU Micro Benchmark

之前的文章描述了如何运行Benchmark&#xff0c;但是那个是基于TCP的。现在想要跑一个基于RoCEv2的结果。虚拟机上没有支持infiniband的网卡&#xff0c;那就用Soft RoCE了。 Soft-RoCE的安装和调试 系统版本信息 adminosu-1:~$ uname -a Linux osu-1 5.11.0-44-generic #48~…

1.1 极限的概念

1.1 极限的概念 1.1.1 数列的极限 引言 在物理实验中&#xff0c;如果涉及到测量&#xff0c;那么误差总是存在的。误差是在正确实验的情况下实验测量值与理论值之间的差值。如果理论是正确的并且使用更精密的实验仪器或改进实验方法&#xff0c;那么测量值就会更加接近理论…

sql server卡慢问题定位和排查

一、数据库服务器资源排查 二、数据库sql性能排查 2.1、查询哪些资源被阻塞了 和 堵进程 1&#xff09;、查询哪些资源被阻塞了&#xff08;spid为阻塞进程id&#xff09; select * from sys.sysprocesses where status suspended 2&#xff09;、查询堵进程…

基于springboot的疫情防控管理系统

1、项目介绍 基于springboot的疫情防控管理系统拥有两种角色&#xff1a;管理员和用户 管理员&#xff1a;用户管理、隔离地点管理、隔离人员管理、防护用具管理、消毒管理、生活需求管理、体温上报管理、核酸结果管理、配餐管理、物资配送管理、隔离解除管理等 用户&#x…

linux make和makefile

目录linux make和makefilemake小程序进度条linux make和makefile make 会不会写makefifile&#xff0c;从一个侧面说明了一个人是否具备完成大型工程的能力 一个工程中的源文件不计数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;makefifile定义了一系列…

一文快速学会linux shell 编程基础!!!

文章目录前言一、shell脚本执行的方式1.格式要求2.脚本常用执行方式2.1 . 输入脚本的绝对路径或相对路径进行执行2.2 使用 sh 脚本的方式shell 的注释语法二、shell 变量1.shell变量介绍2.shell 变量的定义定义变量定义变量的规则将命令的返回值赋给变量3.设置环境变量3.位置参…

多功能电力仪表在物联网的应用

安科瑞 华楠 有线多功能电力仪表场景 应用场景 功能&#xff1a; 1.支持全电力参数测量&#xff1b;以及2-31次分次谐波测量&#xff1b;支持双向有功电能计量&#xff0c;支持四套时段表、4个时区、14个日时段、4种费率的电能统计&#xff1b;需量及发生时间统计&#xff1…

智慧党务管理源码,竞赛答题+阅读学习一套系统全搞定

智慧党务源码系统是利用互联网技术实现党建信息资源整合、逐步提升现代化党建知识水平的党务学习答题系统平台。今天万岳科技就来讲一讲如果开发一套智慧党务源码需要满足哪些功能&#xff1f;智慧党务学习答题系统主要功能为&#xff1a; 1、党组织管理&#xff1a;对各级党务…

我参加NVIDIA Sky Hackathon 环境安装(基本系统环境)

我的硬件环境 x86的物理机RTX 3060 12G16G 的 U盘 软件环境 Ubuntu 20.04 LTSssh 命令行输入 apt install ssh 即可 第一个坑&#xff1a; 18.04 的 Ubuntu 系统在安装过程中无法显示&#xff0c; 99% 的场景显示器会黑屏所以 3060 最好使用 Ubuntu 20.04 及以上版本 安装…

SpringMVC ---- SpringMVC的视图

SpringMVC ---- SpringMVC的视图1. ThymeleafView2. 转发视图3. 重定向视图4. 视图控制器view-controllerSpringMVC 中的视图是 View 接口&#xff0c;视图的作用是渲染数据&#xff0c;将模型 Model 中的数据展示给用户 SpringMVC 的视图种类很多&#xff0c;默认有转发视图和…

[附源码]SSM计算机毕业设计“云味坊”购物网站JAVA

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

振弦采集模块的通讯协议( IIC)

振弦采集模块的通讯协议&#xff08; IIC&#xff09; IIC 通讯协议本身即是基于设备地址和寄存器的物理层通讯协议&#xff0c; VMXXX 使用 IIC 接口对传感器的访问&#xff0c;请遵循前述硬件接口时序及协议说明即可。 IIC 访问时使用与 UART 相同的寄存器地址&#xff0c;地…

【云原生-Docker】使用 Docker Compose 管理容器

&#x1f341;博客主页&#xff1a;&#x1f449;不会压弯的小飞侠 ✨欢迎关注&#xff1a;&#x1f449;点赞&#x1f44d;收藏⭐留言✒ ✨系列专栏&#xff1a;&#x1f449;Docker学习专栏 ✨学习社区&#xff1a;&#x1f449;不会压弯的小飞侠 ✨知足上进&#xff0c;不负…

5种方法实现(a==1 a==2 a==3) == true

乍一看&#xff0c;这个咋能相等呢&#xff1f;深入思考就发现不仅可以相等&#xff0c;还有不少方法&#xff0c;下面就来讲讲这些方法都是如何实现的。 一、valueOf && toString 直接上代码&#xff1a; 比较运算分为2种&#xff0c; 一种为严格比较()&#xff0c;…