对vue项目（增加/进行）单元测试，所遇到的问题及解决方法。 dom节点为null等

最新推荐文章于 2023-10-22 12:01:57 发布
最新推荐文章于 2023-10-22 12:01:57 发布
阅读量2.5k 收藏 1
点赞数 1
分类专栏： 前端web JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39624107/article/details/83377216
版权

1、用vue-cli生成一个新的项目，把单元测试需要的文件直接复制到你现有的项目中

2.增加启动入口

"unit": "karma start test/unit/karma.conf.js --single-run"

3.安装单元测试需要的插件

npm i -D karma karma-webpack phantomjs-prebuilt karma-phantomjs-launcher karma-phantomjs-shim karma-chrome-launcher karma-sourcemap-loader mocha karma-mocha sinon chai sinon-chai karma-sinon-chai karma-spec-reporter karma-coverage

 

4.复制vue-cli生成helloWorld.vue文件到现有项目

执行 npm run unit 

这是测试通过的截图。

 

采坑1、 网上找到解决方法

最低0.47元/天 解锁文章
[vue] beforeDestroy中dom为null？
weixin_30652879的博客
09-12 1479
场景：页面支持播放语音 跳转到其他页面时 需要在beforeDestroy中暂停播放 防止部分型号手机再下个页面中继续播放 先来看一下代码： beforeDestroy() { let _audio = document.getElementById('audioIntroduce'); console.log(_audio); _au...
Vue2测试
在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘
07-14 1060
Vue2测试
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩）
01-19
在项目中往往会有这样的需求： 弹出框（或Popover）在 show 后，点击空白处可以将其 hide。 针对此需求，整理了三种实现方式，大家按实际情况选择。 当然，我们做项目肯定会用到 UI 框架，常见的 Element 中的组件提供了这样的方法。 但是，就算使用框架，有些时候还是要用到的，比如： Element 中的 Popover，当我们想使用手动方式(trigger 触发方式为 manual时)控制它的 show & hide 的时候，就要自己实现这个功能啦。 第一种方式：最普通的手动监听判断 <span ref=projectButton> <el-popover v-mo
[Vue warn]: Error in created hook: "TypeError: dom is null"
信徒博客
09-21 4937
报错信息如下 错误原因 就是dom（一些html标签）还没有渲染，导致dom是null的 mouted是html渲染以后的方法，只能说你的图表节点如echarts还没有渲染就调用了mouted里面的方法了； ...
Javascript单元测试的基础
n8765的专栏
07-31 507
当你写代码的时候，无论是JS代码或其他程序语言是否正常工作是一件你需要关注的事情。你写了一个代码片段，想让它能像预想的一样工作，没有任何差别，这就是为什么你要写那段代码。想象一下，当你已经写了差不多几千行代码时，你能保证它能够正常工作吗？答案是不一定吧。 　　单元测试能够让你写的代码按照你之前预想的方式工作。 　　那么，究竟什么是单元测试？ 　　维基百科上对于单元测试的定义是这样
vue基础之nexTtick获取更新后的DOM
Hiroshi's
03-23 629
今天面试时候一个vue的面试题，第一眼看着非常简单，然后信心满满的回答，然后答错了，在此非常感谢面试官对我的引导和帮助！！也通过这次面试意识到自己很多不足需要学习的地方，加油鸭！ 面试题是类似这样的代码: <div id="app"> <div v-if="showItem" id="content">这是div中的内容</div> <button @click="showContent">显示</button> </div> &
解决vue页面渲染但dom没渲染的操作
10-15
以下是一些解决Vue页面渲染但DOM未渲染问题的方法： 1. **使用`this.$nextTick()`**： 在数据更新后，Vue会在下一个DOM更新循环之后调用`this.$nextTick()`回调。在给定的代码示例中，它用于确保在DOM更新完成后再...
swiper在vue项目中loop循环轮播失效的解决方法
10-18
在Vue项目中实现Swiper的loop循环轮播功能时，我们可能会遇到轮播不生效的问题。这通常发生在使用了autoplay、loop、observer和observeParents等参数配置Swiper时。尤其是在使用v-for循环渲染Swiper组件后，立即初始...
Vue-cli3生成的Vue项目加载Mxgraph方法示例
10-15
在Vue项目中集成Mxgraph库，可以实现强大的图形编辑和绘图功能。Vue-cli3是Vue.js官方提供的脚手架工具，用于快速构建Vue项目。以下是一个详细的步骤指南，教你如何在Vue-cli3生成的项目中加载并使用Mxgraph。 首先...
Vue虚拟节点和渲染函数
黎小小的博客
10-22 712
虚拟节点（dom）本质上就是一个普通的JS对象，用于描述视图的界面结构。
Vue3 学习笔记--基础部分
qq_42530623的博客
07-20 495
对应于官方文档的基础部分
uniapp + vue3.2 用ref获取DOM元素一直为null
weixin_43552533的博客
06-06 3853
uniapp + vue3.2 开发小程序 用ref获取DOM元素一直为null。有人遇到同款问题并已解决的看到捞一下我…
获取dom元素
赵佳敏的博客
12-01 941
一、dom的基本概念 1.dom全称 document object model（文本对象模型） 2. dom 指整个页面元素，统称dom。 3. dom树 二、怎么使用dom 1. dom的操作（主要包括） （1）dom元素获取 （2）dom元素属性操作（常规属性操作） （3）dom元素节点操作（子父节点之类的） （4）dom元素的事件（行为）------事件为主动 （5）dom元素的方法操作------------方法为主动 2. js里面如何获取dom元素（8种方案）.
关于Vue组件无法通过Dom获取元素的问题
qq_41045128的博客
07-06 3857
解决vue组件无法获取Dom元素的问题
js中空白节点的问题
inyiyi的博客
10-20 4519
带着问题上路是我喜欢的学习方式1.为什么会出现空白节点的问题因为浏览器的差异在对于非空文本节点前面或后面有空格或换行符等特殊的文本字符组成，IE和FF就会产生分歧，IE会忽略这些节点，而FF则认可这些节点。2.表现是形式<dl > <dt>title</dt> <dd>definition</dd> </dl>上面的一段代码段分别在IE浏览器FF浏览器下执行下面的代码，作用是显示标记子节点的
空元素（void elements）
weixin_45644355的博客
05-19 1115
一个空元素（empty element）可能是 HTML，SVG，或者 MathML 里的一个不可能存在子节点（例如内嵌的元素或者元素内的文本）的element。 HTML，SVG 和 MathML 的规范都详细定义了每个元素能包含的具体内容（define very precisely what each element can contain）。许多组合是没有任何语义含义的，比如一个 元素嵌套在一个 元素里。 在 HTML 中，通常在一个空元素上使用一个闭标签是无效的。例如， 的闭标签是无效的 HT
vue中点击空白处隐藏div的实现（用指令优雅的实现）
weixin_33877092的博客
04-18 1279
简单想应该怎么实现？ 1、肯定是给document增加一个click事件监听 2、当发生click事件的时候判断是否点击的当前对象 结合着本思路和指令咱们来实现。 简单介绍vue指令 一个指令定义对象可以提供如下几个钩子函数 (均为可选)： bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但...
关于vue 引入 echarts获取不到DOM节点的问题
lhr__的博客
05-20 4078
标题关于vue 引入 echarts的问题 npm 安装之后 在main.js中加入下列代码 import * as echarts from "echarts" app.config.globalProperties.$echarts=echarts vue3中需要这样引入并把echarts挂载到vue原型上 遇到的问题 即使放在mounted中也无法取到dom节点返回为null 使用vue3中的ref获取依旧为null 一个奇怪的问题获取dom节点时可以取到组件最外层的元素，但是内层无法获取 最后放在
vue3 函数传参当前dom节点
最新发布
01-11
### 实现方法 在 Vue 3 中，可以利用 `ref` 来获取 DOM 元素，并将其作为参数传递给函数。具体而言，在模板中使用 `ref` 属性标记目标元素，之后可以通过组合 API 或选项 API 获取该元素并传入自定义函数。 #### 使用组合 API 和 `setup` 当采用组合 API 编写组件时，可以在 `<script setup>` 或者普通的 `<script>` 标签内声明响应式的引用对象。一旦页面完成首次渲染周期后，即可安全地访问实际的 DOM 节点[^1]。 ```vue <template> <div @click="handleClick">点击这里</div> </template> <script setup> import { ref, onMounted } from 'vue'; const myDivRef = ref(null); function handleClick(event) { console.log('当前点击的DOM节点:', event.currentTarget); doSomethingWithElement(myDivRef.value); // 将DOM节点作为参数传递给其他函数 } // 假设这是另一个处理DOM的操作函数 function doSomethingWithElement(element) { if (element) { element.style.backgroundColor = "lightblue"; } } </script> ``` 上述代码片段展示了如何通过事件处理器中的 `event.currentTarget` 获取触发事件的具体 DOM 元素，并且也演示了怎样借助 `ref` 定义好的变量名 `.value` 属性取得对应的 DOM 参考。 #### 动态创建组件场景下的应用 对于动态加载或条件渲染的情况下，可能需要更复杂的逻辑来确保正确的时间点拿到 DOM 节点再执行相应操作。此时除了基本的 `ref` 处理外，还需要考虑生命周期钩子如 `onMounted()` 确认时机合适后再做进一步动作[^4]。 ```javascript import { createApp, h, ref, onMounted } from 'vue'; import MyComponent from './MyComponent.vue'; let appContainer = document.getElementById('app'); if (!appContainer) throw new Error("未找到挂载点"); const componentInstance = ref(); const mountDynamicComponent = () => { const vnode = h(MyComponent, {}, null); const mountedApp = createApp({ setup() { onMounted(() => { setTimeout(() => { // 这里假设有一个延迟后的操作依赖于真实的DOM存在 manipulateDom(componentInstance.value.$el); }, 0); return {}; }); return { componentInstance }; }, template: '<component :is="vnode" ref="componentInstance"></component>' }); mountedApp.mount(appContainer); }; function manipulateDom(domEl) { domEl && domEl.classList.add('highlight'); // 修改样式或其他交互行为 } ``` 这段例子说明了在一个异步流程下（比如按需加载组件），仍然能够可靠地捕获到最终呈现出来的 DOM 结构，并对其进行必要的修改或增强。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值