如何在shallowMount上使用vue-test-utils设置属性？
在使用vue-test-utils的shallowMount方法时，可以通过wrapper.setProps()方法来设置组件的属性。
具体步骤如下：
- 首先，导入需要的依赖：
import { shallowMount } from '@vue/test-utils';
import YourComponent from '@/components/YourComponent.vue';- 使用shallowMount方法创建一个包裹器(wrapper)：
const wrapper = shallowMount(YourComponent);- 使用wrapper.setProps()方法设置组件的属性：
wrapper.setProps({ prop1: 'value1', prop2: 'value2' });其中，prop1和prop2是你组件中定义的属性名，'value1'和'value2'是你想要设置的属性值。
- 在测试中验证属性是否正确设置：
expect(wrapper.props().prop1).toBe('value1');
expect(wrapper.props().prop2).toBe('value2');这样，你就可以在shallowMount上使用vue-test-utils设置组件的属性了。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
- 链接地址：https://cloud.tencent.com/product/cvm
腾讯云云服务器（CVM）是一种基于腾讯云计算资源的弹性虚拟服务器，提供稳定可靠的计算能力。您可以根据业务需求选择不同配置的云服务器，并根据实际使用情况弹性调整配置。腾讯云云服务器支持多种操作系统，提供丰富的网络和存储选项，适用于各种场景的应用部署。
希望以上信息对您有帮助！
相关·内容
免责声明:我对Vue、JavaScript和web框架非常陌生。
我正在尝试使用Jest和vue-test-utils来熟悉一些基本的单元和组件测试。
我已经阅读了vue-test-utils‘和上的文档，但我不确定何时使用其中一个而另一个(它们看起来非常相似)。
根据shallowMount()上的文档
与挂载一样，它创建一个包装器，其中包含已挂载和呈现的Vue组件，但包含有存根的子组件。
“存根子组件”究竟是什么意思？mount()和shallowMount()可以互换使用吗？
浏览 0提问于2018-11-09得票数 29
回答已采纳
在Vue.js中，功能组件可以通过使用returns an array of createdElements的render函数返回多个根节点。 export default {
functional: true,
props: ['cellData'],
render: function (h, context) {
return [
h('td', context.props.cellData.category),
h('td', context.props.cellData.description
浏览 49提问于2019-01-17得票数 5
回答已采纳
在阅读了vue-test-utils的文档之后，我正在尝试提交。
希望有人能澄清我的困惑。
import { mount, shallowMount } from '@vue/test-utils'
import Vue from 'vue'
import Form from '@/components/Form/index.vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)
describe('Form.vue', () => {
/
浏览 2提问于2019-04-14得票数 0
回答已采纳
1回答
我试图在一些Vue组件上使用vue-test-utils和jest设置单元测试，这些组件从另一个Vue组件(ApiCalls.vue)中检索响应，后者负责使用fetch()调用远程API。使API调用的组件返回此类型的对象：
{
status: <fetch response status>,
body: <fetch response body>
}
待测试组件概述(MyComponent.vue)：
import ApiCalls from './ApiCalls.vue';
export default {
data() {
浏览 0提问于2020-12-18得票数 2
回答已采纳
我目前正在尝试使用Jest和vue-test-utils来测试单个文件组件(ComponentB)单元。ComponentB扩展了ComponentA，其中定义了一个方法update(product)。
/* -------- Component B -------- */
<script>
import ComponentA from './ComponentA'
export default {
extends: ComponentA,
props: [...],
data: () => {
productData: {foo:
浏览 0提问于2018-09-06得票数 7
使用vue-test-utils和Jest进行Vue测试，在执行复制命令时出现错误
document.execCommand不是一个函数。我怎么解决它呢？
这是组件源代码中的代码片段。
copyToClipboard(){
document.execCommand('copy');
}
这里我写的测试是这样的；
import Vue from 'vue';
import Vuex from 'vuex';
import {shallowMount} from '@vue/test-utils'
descr
浏览 0提问于2018-10-25得票数 4
这是我第一次使用vue-test-utils在Vue应用程序中实现一组单元测试。测试确实有效，但是，我想把代码干涸。
目前，我正在将以下代码添加到每个测试中：
const wrapper = shallowMount(ConceptForm, {
localVue,
router,
propsData: { conceptProp: editingConcept }
});
让测试看起来像这样
it('shows the ctas if the state is equal to editing', () => {
const wrappe
浏览 0提问于2019-07-11得票数 4
回答已采纳
如果我运行我的jest测试套件，我会遇到一个问题。站点备注，我使用的是vue-test-utils。我的vue数据如下所示： data() {
return {
token: document.head.querySelector('meta[name="csrf-token"]'),
};
}, 我的元素是： <input
type="hidden"
name="_token"
:value="token.content&
浏览 16提问于2019-04-12得票数 1
回答已采纳
我使用Jest和vue-test-utils来测试子组件对父组件中的$emit事件是否有反应。
VueJS测试-utils库提供了一个在安装/浅层挂载组件时传递的parentComponent选项。
除了我用一个模拟的Vuex存储实例化组件，父组件抛出一个
TypeError:无法读取未定义的属性“状态”
在父组件中的this.$store.state.something.here代码段上。
我怎么能嘲笑那里的Vuex商店？
组件挂载如下所示：
const wrapper = shallowMount(ChildComponent, {
store,
localVue,
p
浏览 0提问于2018-09-24得票数 3
嗨，我正在用vue-test-utils测试vue项目。
我想做的是测试路由器(我的项目是使用VueRouter)。
我知道，如果我从路由器文件或VueRouter导入路由并将其用于localVue，则$route和$router属性是只读的，因此我无法对其进行模拟。
但当我试着
transfers.test.js
import { createLocalVue, shallowMount } from '@vue/test-utils'
// import VueRouter from 'vue-router'
// import routes from &#
浏览 6提问于2021-07-13得票数 0
回答已采纳
我正在尝试为Vue的mounted()生命周期钩子中的逻辑编写一个单元测试，但没有太多运气。问题似乎是当使用vue-test-utils mount挂载组件时，mounted()永远不会被调用。下面是我要测试的Vue组件：
<template>
<div></div>
</template>
<script>
export default {
name: 'MyComponent',
mounted () {
this.$store.dispatch('logout')
浏览 3提问于2018-05-11得票数 15
回答已采纳
1回答
我使用vuejs和类型记录，但这个问题也适用于javascript。
使用vue-test-utils，使用mount或shallowMount对组件进行测试.这样，我就能够对App主组件进行单元测试。现在，我想知道如何对main.ts文件进行单元测试，该文件已经挂载了主要组件：
new Vue({
router,
store,
i18n,
render: (h) => h(App),
}).$mount('#app');
单元测试将检查是否真的安装到#app中。毫不奇怪，如果我只是在测试中导入main.ts，就会得到以下错误：
找不到元素：#app
浏览 0提问于2019-06-20得票数 2
回答已采纳
我是vue-test-utils新手，我想为我的Tinymce/index组件编写test.spec.js，但是当我运行npm test时，我得到了这个错误：
Tinymce >遇到声明异常
TypeError: Cannot read property 'init' of undefined
122 | initTinymce() {
123 | const _this = this
> 124 | window.tinymce.init({
| ^
125 | selector: `#${
浏览 7提问于2018-12-11得票数 0
我在这里有一个非常简单的组件来解释我的问题。当我在观察器中使用setTimeout时，测试不会按预期运行。 ComponentTest.vue： <template>
<input v-model="value" type="text">
</template>
<script>
export default {
name: 'ComponentTest',
data() {
return {
value: '',
浏览 23提问于2021-01-08得票数 0
我们有一个自定义的vue单元测试设置，可以在Node，Mocha和模拟浏览器环境的jsdom包上工作(没有webpack，因果报应)。我们已经写了大约3k的规范(有数百个组件的大应用)，现在当mocha运行时，它变得越来越慢，最终进程就会挂起。我们认为"jsdom“中可能存在内存泄漏，所以我们将其更改为"domino”(替代包)，但它仍然挂起。
我们检查了堆内存的使用情况，发现它一直在增长(高达1.5 GB!)。
所以我们认为问题出在vue或vue-test-utils上。看起来我们每次使用mount/shallowMount都需要在每次测试后销毁/卸载它来释放内存？
有什么想
浏览 1提问于2018-11-09得票数 2
2回答
我正在尝试对一个组件进行单元测试(使用vue-test-utils)，该组件在组件导航保护中有一个beforeRouteUpdate，如下所示：
<template>
...
</template>
<script>
export default {
computed: {
...
}
...
beforeRouteUpdate(to, from, next) {
// code to be teste
浏览 3提问于2018-06-18得票数 3
回答已采纳
4回答
我正在测试一个使用vue路由器来监视$route的文件组件。问题是我不能让测试既改变路由又触发观察者的功能。
测试文件：
import { createLocalVue, shallow } from 'vue-test-utils';
import Vue from 'vue';
import Vuex from 'vuex';
const localVue = createLocalVue();
localVue.use(Vuex);
const $route = {
path: '/my/path',
query
浏览 124提问于2017-12-15得票数 6
回答已采纳
不知道是bug还是我做错了什么。
我尝试用shallowMount挂载我的主要应用程序组件，但它不起作用。我收到以下错误消息：
无法设置未定义的属性(设置“hasOwnProperty”)
当vue-test-utils试图挂载应用程序组件时，会发生这样的情况：
...
var appRef = vm.$refs[MOUNT_COMPONENT_REF];
// we add `hasOwnProperty` so jest can spy on the proxied vm without throwing
appRef.hasOwnProperty = function (propert
浏览 12提问于2022-06-14得票数 3
1回答
我正在为现有的vue组件编写单元测试。组件有一个在挂载上运行的方法。该方法使用return this.$parent.$parent.someData。我正在寻找一种在编写单元测试时将祖父母模拟数据传递给组件的方法。我知道将父组件作为模拟传递的方法，但是我正在寻找一种传递父组件的方法。
我在测试中使用了以下代码
const wrapper = shallowMount(MyComponent,{
parentComponent:ParentComponent
})
寻找一种传递祖父母组件的方法。我在使用vue-test-utils。
PS:我不能修改现有的代码。
浏览 4提问于2022-07-27得票数 1
回答已采纳
1回答
我在使用axios编写单元测试时遇到了问题。当我模拟axios时，它返回undefinded。我使用vue-test-utils和jest (参见下面的代码)。我已经检查了文档，但无法弄清楚。 import { shallowMount } from '@vue/test-utils';
import flushPromises from 'flush-promises';
import Vue from 'vue';
import Vuetify from 'vuetify';
import axios from 'a
浏览 27提问于2020-03-16得票数 0
回答已采纳
我正在使用vue-test-utils (1.0.0-beta.29版)测试Nuxt应用程序，并且我懒惰地加载了child组件。在测试时，我希望对parent组件执行shallowMount操作以生成child(我不想呈现child组件，因为它具有依赖性)。
整个组件树在shallowMount中呈现，而不是创建child存根。如果我在没有延迟加载的情况下加载组件，shallowMount将按预期工作。
这个问题似乎已经在这里得到了解决：
我尝试过将{ shouldProxy: true }作为挂载选项传递，或者通过传递{ stubs: ['componentname'] }手
浏览 12提问于2019-07-19得票数 3
1回答
我正在尝试测试一个方法在挂载组件时会被调用，但它总是失败 Expected mock function to have been called one time, but it was called zero times. 下面是组件： <template>
<b-form-input
class="mr-2 rounded-0"
placeholder="Enter Search term..."
id="input-keyword"
/>
</template>
<s
浏览 11提问于2019-09-12得票数 0
回答已采纳
注意:链接的“重复”问题和答案不回答我的问题，请投票重新打开或以其他方式解释为什么在评论中已经关闭了。
我有一个调用created()方法的doSomething()钩子。我可以通过将methods param传递给shallowMount()并使用jest.fn()进行反编译来通过测试。
然而，当我采取这种方法时，我会收到关于methods的反对警告。
console.error
[vue-test-utils]: overwriting methods via the `methods` property is deprecated and will be removed in
the
浏览 5提问于2020-09-25得票数 6
我正在尝试测试在挂载Vue组件时调用的方法。对Vue和Typescript来说还是个新手。
export default class App extends Vue {
mounted () {
this.deviceId()
this.ipAddress()
this.channel()
this.show()
this.campaign()
this.adUnit()
}
这种方法是有效的，但我得到一个警告：
it('mounted methods are cal
浏览 21提问于2020-07-21得票数 2
1回答
我已经创建了一个项目，在vuetify，现在试图单位测试它使用玩笑。我有使用value创建的按钮，它可以切换布尔变量的值。
要检查按钮是否已被单击，我尝试使用给v-btn的类名来获取按钮，但它不起作用。
我试过使用浅安装和普通安装。我试图捕获标记(V)本身，但是它没有工作。
some.vue
<template>
<div>
<v-btn class="profile-button" @click="isProfile = !isProfile">Profile</v-btn>
<v-btn ico
浏览 1提问于2019-04-17得票数 1
我使用的是buefy css库和vue.js框架。
我正在尝试单元测试我的vue组件(Foo)，它包含来自buefy的b-table组件。
<b-table :data="foo" class="container" style="width: 50%">
<b-table-column v-slot="props">
<b-icon
pack="fas"
icon="tim
浏览 9提问于2021-06-10得票数 0
我正在将一个非常大的应用程序从vue-test-utils beta升级到v1。以前，在测试转换时，vue-test-utils预置了TransitionStub和TransitionGroupStub组件，可以用来查找转换并与之交互。我知道我可以创造我自己的..。 const TransitionStub = {
render() {
return this.$options._renderChildren;
},
}; 这适用于简单的情况，但是如果我shallowMount一个带有转换的组件，并且想要发出一个after-enter事件来测试随后发生的事情，
浏览 50提问于2020-06-09得票数 0
1回答
除了测试之外，这款应用的所有功能都运行得很好。 我曾尝试使用@vue/test-utils公开的mount和shallowMount方法来模拟ApolloMutation组件。 我在VueApollo测试中看到了几个解决方案。我已经试过this了。在我的例子中，我使用的是NuxtApollo社区模块。我试图以同样的方式应用它，但是抛出关于包装器的错误是空的，不确定导入@nuxtjs/apollo是否是正确的做法。 import { createLocalVue, shallowMount } from '@vue/test-utils'
import VueApollo fr
浏览 17提问于2019-08-30得票数 0
因此，在Vue-test-utils中不推荐使用setMethods之后，我将我的测试更改为使用jest.spyOn。我只是想从子组件中发出一个事件，并检查父组件上调用了相应的方法，但不知怎么的，我的方法从未被调用过。
it('calls promptPasswordReset method when forgotten-password event is emitted from LoginForm', () => {
const wrapper = shallowMount(login, { store, localVue })
const promp
浏览 3提问于2020-10-21得票数 1
回答已采纳
我看过这个问题的其他答案，它似乎是由于试图将vue-router导入到测试中而引起的。然而，我的问题并不是这样。这是我的测试代码：
import { mount, shallowMount, createLocalVue } from '@vue/test-utils'
import ListDetails from '../components/homepage/ListDetails'
import EntityList from '../components/homepage/EntityList'
import BootstrapVue
浏览 0提问于2019-04-04得票数 14
回答已采纳
4回答
我有一个带按钮的Vue组件。在单击按钮时，调用一个方法。我用Jest做单元测试。我期望来自vue-test-utils的vue-test-utils方法在按钮上创建一个合成事件，但它什么也不做。
我尝试通过调用wrapper.vm.addService()直接在包装器上调用该方法，然后使用console.log(wrapper.emitted())，我确实可以看到已经触发了一个事件。所以我的问题是为什么addServiceBtn.trigger('click')什么都不做。
console.log(wrapper.emitted())是一个空对象。测试结果失败，错误消息为：Ex
浏览 0提问于2018-11-23得票数 9
回答已采纳
我正在为一个Vue.js组件编写单元测试，该组件显示一些无线电按钮，并在检查按钮时发出带有单选按钮id的事件：
ApplicationElement.vue:
<template>
<div id="element">
<label>
<input
type="radio"
name="Element"
id="element1"
v-on:change="chooseElement"
浏览 2提问于2021-01-11得票数 1
回答已采纳
1回答
在遇到困难的几天之后，我明白了使用vue-test-utils测试功能组件会导致一些问题 总而言之，我使用的是Bootstrap-Vue的B-Button，其上有一个调用某些函数/方法的@click事件。当我尝试运行测试以了解是否调用了该方法时，测试失败。但是，当我用<button>替换功能性B-Button时，测试通过了。 这是JobSearch.vue组件 <template>
<b-input-group>
<b-form-input
class="mr-2 rounded-0"
placeh
浏览 15提问于2019-09-12得票数 2
回答已采纳
1回答
我有一个根据window.devicePixelRatio改变图像大小的函数 现在我想对它进行适当的测试。 const wrapper = mount(myComponent, {
propsData: {
size: {
height: 500,
width: 500,
},
format: 'jpeg',
filename: 'path/to/image.jpg',
dpi: 1,
},
})
it('check if higer dp
浏览 11提问于2020-01-03得票数 0
回答已采纳
我已经全局注册了一个组件，并在多个文件中使用过。有超过100个测试用例文件同时使用了挂载和shallowMount，所以我不能转到每个测试用例并将挂载更改为shallowMount。 有没有办法全局地存根组件，而不是去每个测试用例并手动地存根。
浏览 51提问于2021-07-09得票数 0
我使用@vue-test-utils进行vuejs单元测试。 我的商店看起来是这样的： export default {
root: true,
state: {
batches: []
},
getters: {
getBatches: state => {
return state.batches
}
}
} 组件如下所示： <template>
<div>
<p>Batches Work!</p>
</div>
</template>
<script>
浏览 33提问于2019-09-25得票数 0
我正在用TypeScript和Jest用VueCLI编写测试代码。
我调用了Vue文件的方法来测试该方法。
但是，出现了如下错误。
HelloWorld.vue：
<template>
<div class="hello">
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export defa
浏览 1提问于2019-04-03得票数 8
在测试环境中，vue-test-utils更新到1.0.0-beta.26及以上版本后，keyCode不再触发keydown事件，示例： Vue <div @keydown="onKeydown"></div> 脚本 public onKeydown (event: KeyboardEvent) {
if(event.keyCode === 13) {
this.keyName = 'enter'
} else if(event.keyCode === 67) {
this.keyName
浏览 41提问于2019-05-07得票数 3
回答已采纳
vue-test-utils提供了一个setComputed方法，允许您设置计算属性的状态。
import { mount } from '@vue/test-utils'
const wrapper = mount(Home)
wrapper.setComputed({loaded: true})
vue-test-utils版本1.1.0.beta为读取setComputed() has been deprecated and will be removed in version 1.0.0. You can overwrite computed properties by
浏览 6提问于2018-05-21得票数 20
我正在为我用Vue构建的组件构建一个jest测试环境。该组件期望通过该组件的父组件上的vue插件计算的对象作为道具。(具体地说，是由vuelidate插件计算的$v对象)
我的测试方法是使用vue-test-utils的shallowMount的options参数的parentComponent和propsData属性，但是我不知道如何将变量从父组件传递到组件的属性。
TextField.spec.js：
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuelidate from &
浏览 0提问于2019-11-01得票数 1
1回答
我尝试了很多方法，但是$route似乎总是没有定义，我在shallowMount：TypeError: Cannot read property 'params' of undefined上遇到了这个错误。 在我的组件中，我想检查$route的参数，但它总是未定义。我已经查看了文档并模拟了$route来设置它，但是$route似乎没有被模拟。我也试过使用localVue.use(VueRouter)，认为它可以设置$route，但它没有。 my-component.ts @Component
export default class MyComponent extends V
浏览 130提问于2021-04-30得票数 2
1回答
如何纠正我的单元测试以正确地测试下面的内容？
方法：
close(event) {
const element = !!event?.target?.closest('#target')
if (!element) {
this.isVisible = false
}
},
玩笑测验：
it('should hide visibility if element is false', () => {
const wrapper = shallowMount(AccountLogin, { mocks })
wrapp
浏览 4提问于2022-07-12得票数 0
1回答
我试着使用vue-路由器内的vuex操作，它在本地主机上运行良好。
但是，当我试图通过从存储文件导入“action”来准备存储(用于模拟)时，出现了错误。
你能帮我解决这个问题吗？
版本
vue-test-utils: 1.0.0-beta.16
yarn: 1.5.1
vuejs: 2.5.13
vue-jest: 1.4.0
误差msg
FAIL test/components/main.test.js
● Test suite failed to run
/Users/gulliver/Desktop/test/vue-test-utils-jest-example
浏览 0提问于2018-06-30得票数 0
我正在为vue中的画布运行单元测试(测试正在通过)。但是，我得到了错误console.error node_modules/@vue/test-utils/dist/vue-test-utils.js:1735 [vue-test-utils]: Global error handler detected (Vue.config.errorHandler). Vue Test Utils sets a custom error handler to throw errors thrown by instances. If you want this behavior in your tes
浏览 54提问于2020-06-29得票数 0
回答已采纳
我想知道如何对一个使用复杂Vuex存储并扩展另一个组件的组件进行单元测试。
有人能给我举个例子，说明我如何创建一个简单的测试，该测试断言一个组件扩展了另一个组件，并且依赖于Vuex挂载和显示一些简单的文本？
我尝试过使用vue-test-utils来测试组件，但是我无法让我的测试失败，因为它甚至存在构建和安装组件的问题。据我所知，这是组件利用扩展组件的结果，而且这两个组件都依赖复杂的Vuex存储。
任何类型的例子都将不胜感激。谢谢。
编辑：
对于进一步的上下文，我们的商店被分成模块。以下是存储定义文件的样子：
/* global phpvars */
import Vue from '
浏览 0提问于2018-09-17得票数 1
我在一个vue组件上编写测试，当焦点丢失时，该组件必须调用一个方法。 根据vue-test-utils，我应该使用wrapper.trigger('blur')。但是该方法不会被激发。我怀疑blur不是正确的事件名称，因为它在控制台中显示为focusout。但是更改名称并不能解决问题。 组件： <template>
<input @blur="foo" />
</template>
... 测试文件： import { mount } from 'vue-test-utils'
import MyCo
浏览 73提问于2019-05-21得票数 0
我有一个这样的Vue页面：
<template>
</template>
<script>
created(){
this.doSomething();
}
methods: {
doSomething() {
.....
}
}
</script>
现在，我们要测试这个创建的钩子，并检查是否调用了doSomething()方法。
像这样尝试，jest也会被导入到package.json中
import {
shallowMount,
createLocalVue,
} from '@
浏览 1提问于2019-05-09得票数 12
2回答
我有一个Vue 2.0组件，它使用来自的菜单组件。在测试期间，我使用正式的来挂载组件。
我面临的问题是菜单组件将“菜单”附加到HTML(组件范围之外)。正因为如此，我不能像使用组件中的任何其他元素一样使用wrapper.find('.menu')访问它。
是否有一种使用vue-test-utils访问附加到主体的元素的好方法？
更新
在这一点上，我的组件看起来很像这个
我安装了我的组件，像这样：
import Vuex from 'vuex'
import Vuetify from 'vuetify'
import AuthenticatedUs
浏览 5提问于2018-01-10得票数 10
回答已采纳
我在vue.js2中对测试用例使用vue-jest，我有一个名为Register.vue的组件，因为我将测试用例定义为Register.spec.js，当我运行npm时，它运行得很好，但是我得到了以下错误(但是测试用例都通过了)。如何纠正这个错误，请给我一个例子，如何写失败的测试用例，请帮助我解决这个问题。
Register.vue
<template>
<div class="main">
<div class="container">
<img id="side-img" sr
浏览 4提问于2021-06-25得票数 0
回答已采纳
对于Nuxt/Vue组件的Jest测试，我有一个问题。上一天，我将所有需要测试的内容连接起来，用jsdom和babel解决了许多错误，但无法解决Vue组件的问题。
错误是
TypeError: Cannot read property 'child' of undefined
4 | describe('Компонент Counter', () => {
5 | test("renders properly", () => {
> 6 | co
浏览 2提问于2021-12-29得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
