由于我们在测试中定义并装载了一个新组件,因此mount(TestComponent)返回的包装器包含其自己的(空)vm。 总结 Vue 异步更新 DOM,而测试运行程序是同步执行代码的。 使用await nextTick()确保 DOM 在测试继续之前已更新。 可能更新 DOM 的函数(如trigger和setValue)返回nextTick,需要await它们。 使用Vue Test Utils ...
Vue Test Utils 允许你模拟用户事件,如点击、输入等,以测试组件对这些事件的响应。你可以使用 trigger 方法来模拟事件。 test('msg should be changed by Emit', () => { const button = wrapper.findAll('button').at(1) button.trigger('click') expect(wrapper.emitted()).toHaveProperty('reset') }...
为了简化这种常见的情况,Vue Test Utils 提供了一种快捷方式。导致 DOM 更新的方法,例如trigger和setValue返回nextTick,因此你只需await这些方法即可: 代码语言:ts 复制 test('increments by 1',async()=>{constwrapper=mount(Counter)awaitwrapper.find('button').trigger('click')expect(wrapper.html()).toConta...
Dom更新为异步操作,需要使用async await。 代码语言:javascript 复制 importaxiosfrom'axios';importflushPromisesfrom'flush-promises';importtype{VueWrapper}from'@vue/test-utils';import{shallowMount}from'@vue/test-utils';importHelloWorldfrom'@/components/HelloWorld.vue';jest.mock('axios');//将 mock 对象断...
import type { VueWrapper } from '@vue/test-utils'; import { mount } from '@vue/test-utils'; import UserProfile from '@/components/UserProfile.vue'; // 模拟第三方库 ant-design-vue jest.mock('ant-design-vue'); // 模拟外部模块 vuex ...
触发组件事件通常通过trigger方法实现。trigger方法能够触发DOM事件。 示例 import{mount}from'@vue/test-utils';importCounterfrom'@/components/Counter.vue';describe('Counter.vue',()=>{it('increments count on button click',()=>{constwrapper=mount(Counter);constbutton=wrapper.find('button');button.trig...
vue_test_utils vuetestutilsjsdom Vue 默认安装版本已更新为 v3,本文使用 v2 学习 Vue 应用测试。 Vue 官方推荐了两个用于组件测试的框架: Vue Test Utils:Vue 官方提供的测试库,进行单元测试很方便,当然也可以进行集成测试。 Vue Testing Library:更轻量的测试库,封装自 Vue Test Utils ,但只保留了进行集成...
课程中使用了 webpack + jest + vue-test-utils 为组件添加测试,由于 vite 的打包速度比webpack快了几十倍,所以我根据我在这里使用了vitest代替 jest,vite 代替webpack。会使用 jest 基本上可以直接使用 vitest 环境准备 安装依赖 pnpm i vitest vue-test-utils jsdom @vitest/coverage-c8 -D 在packag...
"vitest": "0.34.6", "@vue/test-utils": "2.4.3", "axios-mock-adapter": "^1.22.0", 示例 import { mount } from "@vue/test-utils"; import { test, vi } from "vitest"; import { globalConfig, initEnv } from "../plugins"; import { Mock } from "../plugins/mock"; import...
(三) 安装Vue-test-utils 安装Vue.js 官方的单元测试实用工具库, 在命令行输入: npm install--save-dev vue-test-utils (四) 执行npm run unit 当你完成以上两步的时候, 你就可以在命令行执行npm run unit尝鲜你的第一次单元测试了, Vue脚手架已经初始化了一个HelloWorld.spec.js的测试文件去测试HelloWrold...