使用jest测试vue+elementUI项目

最新推荐文章于 2025-07-01 22:05:41 发布

原创

最新推荐文章于 2025-07-01 22:05:41 发布 · 6.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#测试 #jest #vue

本文记录了在vue+elementUI项目中使用jest进行单元测试的完整流程，作者分享了在测试过程中遇到的问题及解决方案，内容包括测试工具的选择、依赖安装、配置文件设置等，后续将持续更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用jest测试vue+elementUI项目

因为在网上都没有完整的流程，资料也很少，开始的时候踩过很多坑，所以写一些东西记录一下，有问题也可以提出来一起讨论。下面的内容是本人做单元测试时学到的以及遇到的问题，测试还没做完，后面会不定时更新。

参考资料

Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。
jest 使用文档

安装需要的依赖

npm install jest vue-jest babel-jest @vue/test-utils --save-dev

配置文件(具体用法请查阅 jest 使用文档)
```
// tes
```

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

twmay006

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
6
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue+Jest 单元测试

arron4210的博客

06-10

2449

新到一个公司，要求单元测试覆盖率达50%以上，我们都是后补的单测，其实单测的意义是根据需求提前写好，驱动开发，代替手动测试。然鹅这只是理想。。。这里总结一下各种遇到的单测场景挂载组件，调用elementui, mock函数 ```javascript describe('页面验证', () => { const wrapper = getVue({ component: onlineFixedPrice, callback(Vue) { Vue.use(

callback回调使用 vue_Vue与单元测试

weixin_39961369的博客

12-20

481

什么是单元测试通过代码来检测代码是否正确，给一个具体的输入来判断是否能够得到期望的输出单元测试常用库和工具Chai：断言库，提供一些api来实现对期望结果的断言Karma：一个测试运行器，模拟浏览器给测试脚本提供一个运行环境Mocha：一个单元测试框架库,可以任意选择断言库，如chai,expect.js等Sinon：用于测试复杂代码而提供的库，提供了一些api用于辅助测试用例Travis CI...

6 条评论您还未登录，请先登录后发表或查看评论

JEST测试Vue2+elementui项目

web8_zhy的博客

10-17

2012

jest、单元测试、vue

vue-35（使用 Jest 和 Vue Test Utils 设置测试环境）

最新发布

清幽竹客

07-01

985

摘要：设置 Vue.js 测试环境本课程介绍了如何配置 Jest 和 Vue Test Utils 来测试 Vue.js 应用。主要内容包括：安装依赖：通过 npm/yarn 安装测试框架(Jest)和 Vue 测试工具库(Vue Test Utils)及相关插件配置Babel：创建 babel.config.js 确保 Jest 能正确转译现代 JavaScript 语法 Jest配置：详细设置 jest.config.js 文件，包括文件转换规则、模块映射、测试匹配模式等测试脚本：在 packa

jest测试vue+element

baidu_36831253的博客

12-02

3019

具体看去参看官网 vue-test-utils https://vue-test-utils.vuejs.org/zh/guides/#%E9%85%8D%E5%90%88-vue-router-%E4%BD%BF%E7%94%A8 https://jestjs.io/docs/zh-Hans/getting-started jest.conf.js const path = require('path') module.exports = { rootDir: path.resolve(__di

vue unit test 单元测试 jest element-ui国际化i18n报错解决 Cannot read property ‘_t‘ of undefined Unknown custom

yuan_618859的博客

05-17

3126

报错点： 1.Cannot read property ‘_t’ of undefined 2. Unknown custom element: - did you register the component correctly? 解决方法：直接看下面代码就好了 // 1导入：vue测试工具类 // import Vue from 'vue'; import {shallowMount, mount, createLocalVue } from '@vue/test-utils'; const loc

vue項目加入单元测试模块，使用jest

Twinkle_sone的博客

08-19

1195

用Jest测试单文件组件 1、安装 Jest 和 Vue Test Utils npm install --save-dev jest @vue/test-utils 2、安装和配置 vue-jest 预处理器 npm install --save-dev vue-jest 3、配置相关文件（1）package.json // package.json { "scripts": { "test": "jest" } } （2）jsconfig.js { "compilerOpti

vue+elementui 的管理后台源码稍微有些复杂

05-25

- 使用Vue Test Utils结合Jest进行Vue组件的测试。 7. **Webpack配置**： - **Webpack的基本概念**：entry、output、loaders、plugins等。 - **Vue CLI**：Vue官方提供的脚手架，自动配置Webpack，简化项目初始...

管理系统系列--Vue+ElementUI后台管理系统.zip

02-25

9. **单元测试与E2E测试**：了解Jest或Mocha等测试框架，编写单元测试确保组件功能的正确性，而End-to-End测试则用于模拟用户操作，验证整个系统的功能流程。通过这个项目，你可以深入理解Vue.js和Element UI结合...

基于Vue+ElementUI框架的OceanAftersales售后服务系统设计源码

09-29

如.plopfile.js、postcss.config.js、.env.development、.editorconfig、.eslintignore、.gitignore、.eslintrc.js、vue.config.js以及jest.config.js，这些文件分别负责自动化生成代码、编辑器设置、代码检查和测试...

vue + element-ui实现按钮和权限管理动态路由

01-18

`jest.config.js`是Jest测试框架的配置文件，用于设置测试的配置项，如文件匹配规则、全局变量等。`tests`目录存放的是单元测试和集成测试的代码，确保应用在修改和扩展时仍能正常工作。 5. **构建配置** `...

vue-cli 项目集成 Jest 单元测试

lhz_333的博客

03-23

4435

前端单元测试对于保证代码质量和稳定性是非常重要的。

浏览器使用vue不显示element控件

qq_45952112的博客

06-30

396

Vue报错：[Vue warn]: Unknown custom element: <el-dialog> - did you register the component correctly?一直没有在vscode中报错，之后查看网页代码是发现有个warn，才发现是这个原因。原因：没有将element-ui在main.js中注册。//配置Vue插件将El安装到Vue上。浏览器中可以显示element的控件。//导入组件相关样式。

jest搭建vue项目单元测试-vue-cli创建新项目

guo8ke的专栏

08-08

956

说道项目会分为新建的醒目和老项目两种，我们先来说新项目。一、新项目加入jest单元测试 1、创建项目使用vue脚手架创建项目 test-vue-jest vue create test-vue-jest 2、创建项目过程中配置选项在配置项中按照正常创建项目选择配置项即可，此外需要选择单元测试“Unit Testing” 和 “Jest”选项如下图： ...

前端自动化测试jest

萌萌哒的瑞萌萌的博客

06-03

2169

持续集成和前端自动化测试持续集成是互联网软件开发上线流程中的核心一环，自动化测试是持续集成得以实现的核心步骤，缺乏了自动化测试，持续集成自然无从谈起。在日常的开发中，前端错综复杂的变化引发的 bug 往往令开发者头疼，或多或少经历过修完东墙西墙倒的经历，此时前端自动化测试就显得非常重要。前端的自动化测试无非也是编写测试用例，在持续集成时执行跑通全部测试用例。如果是一个短平快的小项目，引入前端自动化测试，编写测试用例，无疑只会增加开发成本，然而当项目扩大、迭代频繁、逻辑复杂、需求反

React Jest UI测试

m0_37068028的博客

11-01

1757

组件 // demo.js import React, { PureComponent } from 'react' class Demo extends PureComponent { static defaultProps = { title: 'This is a demo', value: 0 } constructor (props) { supe...

jset编写测试vue代码_一篇文章学会 Vue 项目单元测试

weixin_39692271的博客

12-31

317

这篇文章有三部分，阅读完大概需要 10 分钟(代码块较多，建议使用电脑浏览)一: 搭建基于 jest 的 vue 单元测试环境二: 使用 vue-test-util 提高测试编码效率三: 复杂场景下的测试(模块，异步，rxjs)第一部分: 搭建基于 jest 的 vue 单元测试环境因为 jest 包含了 karma + mocha + chai + sinon 的所有常用功能，零配置开箱即用，所...

elementUi报错问题，组件无法使用的问题

weixin_48927323的博客

05-16

2302

vue.runtime.esm.js?c320:619 [Vue warn]: Unknown custom element: <el-xxx> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 网上说是版本问题，卸载掉之后反应过来我安装的是最新的，并无卵用，重新按了回来。排除掉版本问题之后，就有可能是没有被正确引

完善前端页面vue+elementui

07-27

Vue + Element UI是一个非常流行的前端开发组合，它结合了Vue.js作为轻量级的MVVM框架和Element UI作为功能强大的UI... - 使用单元测试库如Jest对关键功能进行测试，同时关注性能优化，比如图片懒加载、CDN资源引用等。