首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vue测试: shallowMount和localVue在第二次运行相同的测试时产生错误。它们不是纯函数吗?

Vue测试中的shallowMount和localVue在第二次运行相同的测试时可能会产生错误。它们并不是纯函数。

shallowMount是Vue Test Utils提供的一个方法,用于创建一个包含被测组件的浅渲染Wrapper实例。它的作用是只渲染被测组件本身,而不渲染其子组件。这样可以提高测试的效率。然而,由于shallowMount并不是纯函数,它在每次运行测试时都会保留一些状态,比如之前的渲染结果和组件实例。因此,如果在第二次运行相同的测试时,之前的状态没有被正确清理或重置,就可能导致错误的发生。

localVue是Vue Test Utils提供的一个辅助函数,用于创建一个独立的Vue实例。它的作用是在测试中提供一个干净的Vue环境,以避免测试之间的相互影响。然而,同样地,localVue也不是纯函数。它在每次运行测试时都会保留一些状态,比如之前注册的组件、指令和插件。如果在第二次运行相同的测试时,之前的状态没有被正确清理或重置,就可能导致错误的发生。

为了解决这个问题,我们可以在每个测试之前手动清理和重置shallowMount和localVue的状态。可以使用Vue Test Utils提供的一些方法,比如destroy和reset。具体的操作步骤如下:

  1. 在每个测试之前,调用shallowMount和localVue的destroy方法,以销毁之前的渲染结果和组件实例。
  2. 在每个测试之前,调用localVue的reset方法,以重置之前注册的组件、指令和插件。

这样做可以确保每次运行测试时都有一个干净的测试环境,避免之前的状态对当前测试的影响。

关于Vue测试的更多信息和使用方法,可以参考腾讯云的Vue Test Utils产品文档:Vue Test Utils产品文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vuex 之单元测试

expect(state).toEqual({ postIds: [1], posts: { "1": post } }) }) }) 以 yarn test:unit 运行测试产生以下错误信息...请求,并且因为我们运行在一个测试环境中,所以并不是真有一个服务器处理请求,这就导致了错误。我们也没有定义 url 或 body -- 我们将在解决掉 axios 错误后做那些。...它们可以通过测试 async actions 相同技术被测试。 4 - 测试组件内 Vuex:state getters 现在来看看 Vuex 实际组件中表现。...让我们再次审视它们,这次是 mutations actions 语境中。...总结 mutations getters 都只是普通 JavaScript 函数它们可以、也应该,被区别于主 Vue 应用而单独地测试 当单独地测试 getters ,你需要手动传入 state

3.3K20

Vue-Router 进行单元测试

可以 测试中使用一个相同 localVue,并将其声明第一个 describe 块之外。而由于要为不同路由做不同测试,所以把 router 定义 it 块里。...但也可以用单元测试检验导航 guards 中调用函数是否正常工作,并更快获得潜在错误反馈。这里列出一些如何从导航 guards 中解耦逻辑策略,以及为此编写单元测试。...通过将 beforeEach 导出为一个已结耦、普通 Javascript 函数,从而让其测试中不成问题。...组件 guards 一旦将组件 guards 视为已结耦、普通 Javascript 函数,则它们也是易于测试。...总结 本文讲述了: 测试Vue Router 条件渲染组件 用 jest.mock localVue 去 mock Vue 组件 从 router 中解耦全局导航 guard 并对其独立测试

2.2K10

Vue 应用单元测试策略与实践 04 - Vuex 单元测试

本文目标 2.2 Vue 应用单元测试中,对 Vuex store 该如何测试?如何测试Vue 组件之间交互? // Given 一个有基本UT知识Vue组件单元测试经验开发者?...mutations 测试 Mutation 很容易被测试,因为它们仅仅是一些完全依赖参数函数。最为简单 mutation 测试,仅一一对应保存数据切片。...getters 也是比较重逻辑地方,并且它也是一个函数,与 mutations 测试享受同样待遇:纯净输入输出,简易测试准备。...站在单元测试角度,其实我们测试 Vue 组件(单元)时候不需要关心 Vuex store 长什么样子,我们只需要知道 Vuex store 当中这些 action 将会在适当时机触发,以及它们触发预期行为是什么...而 localVue 则是一个独立作用域 Vue 构造函数,我们可以对其进行任意改动。

1.6K30

Vue 测试速成班

类型 我们可以编写三种类型测试:单元测试、集成测试端到端测试。下面这个金字塔可以帮助我们理解这些测试类型。 ? 金字塔下端测试写起来更容易,运行起来更快,也更容易维护。...测试运行器 对于新 Vue 项目,添加测试最简单方法是使用 Vue CLI[2]。在生成项目(执行 vue create myapp),你必须手动选择单元测试 E2E 测试。 ?...而在复杂应用程序中,我们需要在不同位置访问改变相同状态。Vuex[6] 是 Vue 状态管理库,它可以帮助你一个地方组织状态管理,并确保其可预测地发生变化。...当使用组件 store ,我们必须将局部 Vue 实例 store 实例传递给 mount 函数。...总结 我们已经介绍完了所有的测试用例,从一个函数基本单元测试实际浏览器中运行端到端测试

2.7K10

Vue Router 之单元测试

对于与路由交互组件,有两种测试方式: 使用一个真正 router 实例 mock 掉 $route $router 全局对象 因为大多数 Vue 应用所使用都是官方 Vue Router,所以本文会聚焦于这个插件...可以 测试中共用一个 localVue,故将其声明第一个 describe 块之外。而由于要为不同路由做不同测试,所以把 router 定义了 it 块里。...通过将 beforeEach 导出为一个已解耦、普通 Javascript 函数,从而让其测试过程中不成问题。...组件 guards 一旦将组件 guards 视为已解耦、普通 Javascript 函数,则它们也是易于测试。...总结 本文覆盖了: 测试Vue Router 条件渲染组件 用 jest.mock localVue 去 mock Vue 组件 从 router 中解耦全局导航 guard 并对其独立测试

1.9K10

Vue 业务系统如何落地单元测试

一直对单测很感兴趣,但对单测覆盖率、测试报告等关键词懵懵懂懂,最近几个月一直摸索如何在Vue业务系统中落地单元测试,看到慢慢增长覆盖率,慢慢清晰模块,对单元测试理解也比以前更加深入,也有一些心得收获...今天把自己笔记分享出来,大家一起交流我2个较为复杂Vue业务系统中落地单测一些思路方法,算是入门实践类笔记,资深大佬还请跳过。...3. githook 配置 作用:提交执行所有测试用例,有测试用例不通过或覆盖率不达标时取消提交。 ? ?...落地单元测试 ❌ 直接对一个较大业务组件添加单元测试,需要模拟一系列全局函数,无法直接运行。...数据泥团-相同参数多个函数间传递。

3.9K30

前端单元测试那些事

很长一段时间以来,单元测试不是前端工程师应具备一项技能,但随着前端工程化发展,项目日渐复杂化及代码追求高复用性等,促使单元测试愈发重要,决定整个项目质量关键因素之一 1.单元测试意义?...(Test Runner),让你代码自动多个浏览器(chrome,firefox,ie等)环境下运行 Mocha - Mocha是一个测试框架,vue-cli中配合chai断言库实现单元测试( Mocha...我项目开发使用jest作为单元测试框架,结合vue官方测试工具vue-util-test 3.1 Jest 安装 npm install --save-dev jest npm install -g...来挂载组件,区别在于shallowMount不会渲染子组件,详细区别,可以通过shallowMountmount两个方法分别挂载同组件并进行快照测试后查看所生成文件内容 ?...(fn) 每一个测试之前需要做事情,比如测试之前将某个数据恢复到初始状态 afterEach(fn) 每一个测试用例执行结束之后运行 beforeAll(fn) 在所有的测试之前需要做什么

4.3K40

学习笔记——vue中如何配置Jest(一)

最近在搞Jest单元测试,如何在vue中安装使用jest我就不说了,前一篇文章简单说了一下使用jest遇到一些问题,但是我觉得并没有真正解决很好。...所以,我想在这篇文章中,整理记录一下jest配置参数用法等。   jest配置文件是单独生成unit文件夹下一个独立文件,并没有vue-cli生成webpack构建环境相关联。...这是当前版本vue-cli生成jest.conf.js配置文件,我们可以package.json中配置项里看到,我们npm run unit 时候,真正运行就是这个文件配置。   ...setupFiles:运行一些测试环境所要依赖模块路径列表,比如引入vue,elementUI等插件列表,以给测试提供完整环境。...并且解释说明一下我使用jest时候一个疑问,什么是localVueshallowMount与mount与localVue区别是啥?localVueVue区别是啥?

1.8K10

学习笔记——vue中如何配置Jest(一)

最近在搞Jest单元测试,如何在vue中安装使用jest我就不说了,前一篇文章简单说了一下使用jest遇到一些问题,但是我觉得并没有真正解决很好。...所以,我想在这篇文章中,整理记录一下jest配置参数用法等。   jest配置文件是单独生成unit文件夹下一个独立文件,并没有vue-cli生成webpack构建环境相关联。...,我们npm run unit 时候,真正运行就是这个文件配置。   ...setupFiles:运行一些测试环境所要依赖模块路径列表,比如引入vue,elementUI等插件列表,以给测试提供完整环境。...并且解释说明一下我使用jest时候一个疑问,什么是localVueshallowMount与mount与localVue区别是啥?localVueVue区别是啥?

1.9K30

Vue 应用单元测试策略与实践 03 - Vue 组件单元测试

阅读练习本文Vue单元测试部分 // Then 当然,他能够学会Vue组件测试当中几种渲染方式 他能够学会UI组件分类,特别是交互行为测试方式 组件化与 UI 测试 组件化出现之前,我们都压根不谈...给这个函数输入一些应用程序状态,就会得到相应 UI 描述输出,这个过程不会去直接操作实际 UI 元素,也不会产生所谓副作用。...Vue 组件树测试 按理来说按照函数这样思路,Vue 组件测试应该很简单说。...对于 Vue 组件树来说,浅渲染(Shallow Rendering)解决了这个问题,也就是说我们针对某个上层组件进行测试,可以不用渲染它子组件,所以就不用再担心子组件表现行为,这样就可以只对特定组件逻辑及其渲染输出进行测试了...从技术上讲,你可以真实浏览器中运行,但由于不同平台上启动真实浏览器复杂性,更建议使用 JSDOM 虚拟浏览器环境中运行 Node 中测试

1.3K10

前端基建处理之组件库优化方案

tags: 这是一个标签数组,你可以添加任何你喜欢标签来帮助你组织查找你故事。 render: 这是一个函数,返回一个 Vue 组件配置对象,用于定义如何渲染故事。...在这个例子中,所有的 args argTypes 都被传递给 MyButton 组件,你可以 Storybook UI 中调整它们值。...编写单元测试 我们在编写好vue组件之后,如果要对当前这个组件编写单元测试,可以组件当前目录(初定是组件放在同一个目录下)创建对应一个 xx.spec.js文件,然后文件中编写对应单元测试,...; 运行与调试单元测试 我们package.json中增加一个命令,用于运行单元测试 { "scripts": { "test": "jest" } } 运行单个单测文件...可以考虑使用自动化测试每次PR或者MR时候做运行所有的单元测试,检查测试覆盖率之类 如果无法做自动化测试的话,可以考虑每次PR或者MR时候要求提交人补充本地运行所有单元测试结果,这里就可以通过配置一些

26410

如何对第一个Vue.js组件进行单元测试 (下)

然后第二次测试将失败。        测试,你不想依赖诸如命令这样脆弱东西。测试套件应该是强大,并且除非您破坏API,否则理想情况下现有测试应该不会改变。        ...通过这种方式,我们可以100%确定每当我们运行测试,我们都能使用新父级。 测试特殊标识符        将选择器与样式其他目的(例如测试钩子)混合绝不是一个好主意。        ...此数据属性唯一目的是能够测试期间定位元素,因此我们只想在运行它们进行设置。为此,我们可以使用Webpack提供NODE_ENV环境变量,这是为我们项目提供动力模块捆绑器。        ...首先,单元测试组件可能看起来很奇怪。为什么要对UI用户交互进行单元测试?这不是功能测试?        ...我们例子中,我们组件与任何其他函数没有区别:它接受输入并返回输出。这些原因后果是我们正在测试,而不是其他任何东西。        令人困惑是,我们测试与常规单元测试略有不同。

3.3K00

Vue 组件中分离 UI 业务逻辑

原文:https://vuejs-course.com/blog/separating-ui-and-business-logic-in-vue-components 我大型 Vue React...待改进待重构 该组件当前运行良好,也没有明显问题。但如果我想在产品中开始使用这个组件的话,除了改进为更健壮估测算法外,还有一些能给我前进信心改变。我将研究改进有: 测试!...分离 UI 业务逻辑 分离业务逻辑会使其非常易于达成我一个其它目标,就是迁移到更安全密码强度估测算法。 编写回归测试 着手进行任何重构之前,我总是会编写一些基础回归测试。...this 引用了 Vue 实例或组件,所以: this 上附加任何事情 都不应该 UI 产生关联 checkPassword 同时也是一个函数 —— 其中没有引用到 this 全局变量,这意味着它有确定性...if (passwordStrength === 4) { return 'secure' } } 注意我们并没有将 passwordClass 函数直接 export 了之 -- 这反映了我开头阐述

1.6K40

立等可取 Vue + Typescript 函数式组件实战

函数是 FP 中一等公民(First-class object),可以被当成函数参数或被函数返回;同时,这些函数应该不依赖或影响外部状态,这意味着对于给定输入,将产生相同输出。...而对于组件逻辑上,仍需要通过单元测试完成安全脚手架搭建。同时,由于函数式组件一般相对简单,测试编写起来也不麻烦。 关于 Vue 组件单元测试,可以参阅以下文章: ?...这时候如果直接用 shallowMount 等方式测试中加载组件,会出现报错: [Vue warn]: Multiple root nodes returned from render function...函数式组件就是一个没有实例组件,也称“无状态组件” 函数式组件渲染速度快,更易于实现条件性渲染高阶特性 Vue函数式”组件基于可变数据,并非纯粹函数式编程 TypeScript 可以更精确定义检查...props 类型,自动提示也更友好 可使用自定义 TS 接口声明 Vue FC props 结构 Vue 函数式组件可以与 Composition API 结合使用 对 Vue 函数式组件进行单元测试需要注意渲染触发问题

2.2K20

【架构师(第二十九篇)】Vue-Test-Utils 触发事件异步请求

---- 知识点 将 mock 对象断言为特定类型 使用 jest.Mocked 使用 it.only 来指定测试 case 使用 skip 跳过指定测试 case 测试内容 触发事件...测试准备结束 可以使用内置一些钩子来简化一些通用逻辑,以下钩子用于一次性完成测试准备。...beforeAll afterAll let wrapper: VueWrapper; describe('HelloWorld.vue', () => { // 多个 case 运行之前执行...}); // 多个 case 运行之后执行,只执行一次 afterAll(() => {}); }); 以下钩子用于每个测试用例测试准备。...(() => { mockAxios.get.mockReset(); }); }); 测试建议 如果一个测试失败了,需要注意 它是否是唯一在运行用例,使用 only 单独运行一次 如果单独运行没问题

80810

Vue 3 Composition API 之单元测试

这篇文章将用一个简单例子,展示使用了 Composition API Vue 2 组件,其测试策略处理其他组件何其相同。...API 同样测试策略。...总结 本文演示了如何测试一个使用了 Composition API 组件测试一个传统 options API 组件,无论是想法还是概念,都是何其相同。...要学习要点在于,当编写测试,基于输入输出做出断言。vue-test-utils 并不关心你如何构成组件;所有既有的方法 APIs 都能应用于 Composition API。这是个好事!...应该在无需修改单元测试前提下,使用 Composition API 重构任何传统 Vue 组件。如果你发现自己重构需要更改测试,很可能就是之前测试了 具体实现,而非输出。

1.6K10

实例入门 Vue.js 单元测试

官方文档中给出了非常清楚说法: 组件单元测试有很多好处:- 提供描述组件行为文档 - 节省手动测试时间 - 减少研发新特性产生 bug - 改进设计 - 促进重构自动化测试使得大团队中开发者可以维护复杂基础代码...本文作为《对 React 组件进行单元测试》一文姊妹篇,将照猫画虎式尝试面对初学向中级进阶开发者,对单元测试 Vue.js 技术栈 中应用做出入门介绍。 I....: 添加一个测试 运行所有测试,看看新加这个测试不是失败了;如果能成功则重复步骤1 根据失败报错,有针对性编写或改写代码;这一步唯一目的就是通过测试,先不必纠结细节 再次运行测试;如果能成功则跳到步骤...,主要 API Jest Vue Test Utils 文档里都能找到。...总结 单元测试作为一种经典开发重构手段,软件开发领域被广泛认可采用;前端领域也逐渐积累起了丰富测试框架方法。

2.8K20

你不知道 Vue 单元测试(6000字实战单元测试

主流单元测试运行器有很多,比如 Jest、Mocha Karma 等,这几个 Vue-Test-Utils 文档里都有对应教程,这里我们只介绍 Vue-Test-Utils + Jest 结合示例...❝Jest 是一个由 Facebook 开发测试框架。Vue 对其进行描述:是功能最全测试运行器。它所需配置是最少,默认安装了 JSDOM,内置断言且命令行用户体验非常好。...不过你需要一个能够将单文件组件导入到测试预处理器。我们已经创建了 vue-jest 预处理器来处理最常见单文件组件特性,但仍不是 vue-loader 100% 功能。...❞ 环境配置 通过脚手架 vue-cli 来新建项目的时候,如果选择了 Unit Testing 单元测试且选择是 Jest 作为测试运行器,那么项目创建好后,就会自动配置好单元测试需要环境,直接能用...是测试用例名字,fn 是具体可执行函数;一个测试套件里可以保护多个测试用例。

11.1K41

全面了解 Vue.js 函数式组件

同时 FP 中,函数应该不依赖或影响外部状态,这意味着对于给定输入,将产生相同输出 -- 这也就是 FP 中常常使用“不可变(immutable)”、“函数(pure)”等词语缘由;如果再把前面提过...感叹,写上个 functional 就叫函数式了??? 实际上 Vue 3.x 中,你还真的能 React 一样写出那种渲染函数函数式组件”,这个我们后面再说。...回想起你面试,回答关于如何优化多层节点渲染问题那种气吞万里自信,我们显然应该在这次实践中更进一步,既能拆分关注点,又要避免性能问题,函数式组件就是一种这个场景下合适方案。...这时候如果直接用 shallowMount 等方式测试中加载组件,会出现报错: [Vue warn]: Multiple root nodes returned from render function...此外,h 现在是全局导入,而不是 render 函数中隐式提供: import { h } from 'vue' const DynamicHeading = (props, context) =

2.7K30

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券