Vue组件测试出现Jest错误，TypeError:无法读取未定义的属性“”name“”
在Vue组件测试中出现Jest错误TypeError: Cannot read property 'name' of undefined通常是由于在测试中未正确设置组件的props或者数据。
要解决这个错误，可以采取以下步骤：
- 确保测试文件中正确导入了待测试的Vue组件。
- 使用Jest提供的
mount方法将组件进行挂载，以便进行测试。确保在挂载组件时，传递正确的props和data。 - 检查待测试的Vue组件的props和data的使用情况。确保在组件中使用props和data之前，进行了正确的判断，以避免出现未定义的属性。
- 如果组件中使用了props，并且没有提供默认值，那么在测试时需要为props传递一个有效的值。可以使用
propsData选项来为组件设置props的初始值。 - 如果在测试过程中需要模拟异步操作或者操作组件的生命周期钩子函数，可以使用Jest提供的
async和await关键字，或者使用Vue Test Utils库提供的flushPromises方法。
总结：在Vue组件测试中出现TypeError: Cannot read property 'name' of undefined错误，是由于未正确设置组件的props或者数据导致的。通过检查测试文件中的组件导入、挂载组件时传递的props和data，以及组件中对props和data的使用情况，可以解决该错误。在测试过程中，如果需要模拟异步操作或者操作生命周期钩子函数，可以使用适当的工具和关键字来处理。
相关·内容
我试图为我的Vue应用程序设置单元测试，但是每次我运行测试时，挂载或shallowMount函数都会抛出一个TypeError:无法读取属性‘组件’的未定义错误。我尝试了@vue/test-utils版本1.0.0-beta.32、1.0.0-beta.31和1.0.0-beta.27，但没有成功。
错误信息：
ActuatorController
✕ is a Vue instance (24ms)
● ActuatorController › is a Vue instance
TypeError: Cannot read property 'compon
浏览 3提问于2020-04-06得票数 2
回答已采纳
我创建了一个简单的webapp来练习我在Vue中使用vue测试Utils和Jest的测试技巧，但是在Vue中出现了一个错误。我只是一个控制台日志记录，以查看我的AddDialog是否在我的主页文件中，但是有一个错误:这是我的错误：
TypeError:无法读取未定义的属性“_modulesNamespaceMap”
这是我的测试代码。
// Imports
import Home from '@/components/Home'
// Utilities
import {createLocalVue, mount, } from '@vue/test-utils&
浏览 3提问于2021-01-30得票数 3
3回答
我正在为我的Vuejs 2 (Vuetify)组件编写一个jest单元测试。设置非常简单。
在组件中，我有一个支柱，它是一个带有嵌套字段的对象：
props: ['testObject']
我有一个计算属性，它从这个支柱返回一个字段：
computed: {
myField() {
return this.testObject.testField;
}
}
我写了一个Jest测试：
wrapper = mount(MyComponent, {
mocks: {
propsData: {
浏览 22提问于2022-07-07得票数 4
我试图设置一个单元测试如下：
import Vue from 'vue'
import ChangeTitleComponent from '@/components/ChangeTitleComponent'
import store from '@/vuex/store'
describe('ChangeTitleComponent.vue', () => {
describe('changeTitle', () => {
var com
浏览 2提问于2017-09-17得票数 0
回答已采纳
我的组件onMounted()函数中有一个setup()钩子来访问$route.params property，但是当我在测试中模拟$route对象时，$route是onMounted()钩子中的undefined，因此抛出了一个错误。这是密码
Component.vue :
<template>
<div>{{ this.$route.params.id }}</div>
</template>
<script lang="ts">
import {defineComponent, onMounted} fro
浏览 16提问于2021-08-02得票数 4
1回答
我的Vue组件使用了来自的掩码，它工作得很好。
<v-text-field
v-model="cpfCnpjField"
v-mask="maskcpfCnpjField"
></v-text-field>
在我的规范文件规范中，我正在导入VueMask
import VueMask from 'v-mask';
const localVue = createLocalVue();
localVue.use(VueMask);
当我使用jest运行测试时，无法挂载组件。编译器抛出
node_modules
浏览 3提问于2021-04-16得票数 1
2回答
的问题。
我正在用Vue和Capacitor开发一个Ionic应用程序。我正在使用vue-test-utils + Jest设置单元测试。Jest单元测试无法将电容插件导入Vue单个文件组件。
Vue应用程序是使用Vue CLI 3 (v3.4.0)创建的。CLI选项包括使用Jest进行单元测试。我对单元测试非常陌生。在导入Vue组件之前，我天真地尝试过@电容/核心模块；这没有帮助。
jest.config.js (Vue CLI默认值)
module.exports = {
moduleFileExtensions: ["js", "jsx", "
浏览 0提问于2019-06-21得票数 0
回答已采纳
1回答
我有一些来自第三方加载项/库的子组件。我使用Jest作为我的单元测试和toMatchSnapshot()方法。我试图用jest.unmock('ChildComponet.js')排除子组件，得到了以下错误：
jest.unmock('ChildComponet.js')被调用，但是自动锁定是禁用的。删除对jest.unmock的不必要调用，或通过jest.enableAutomock();__为此测试启用自动锁定。此警告可能是Jest 15中默认配置更改的结果。
我启用了jest.enableAutomock();，现在我有了一个错误：
TypeError:无
浏览 2提问于2016-10-14得票数 0
回答已采纳
3回答
我不知道为什么在访问嵌套对象时会收到Vue警告。
{{ user.area.name }}
Vue警告:呈现错误："TypeError:无法读取未定义的属性‘名称’“
TypeError:无法读取未定义属性的“名称”
仅仅访问对象就没有任何警告。
{{ user.name }}
有什么建议吗？
浏览 1提问于2018-10-11得票数 0
回答已采纳
1回答
TypeError：无法读取未定义的属性“提取”
在节点_模块/什么地方-获取/获取. at :4:8在对象。(节点_模块/什么-获取/获取. at :466:3)在对象。(节点_模块/jest-expo/src/setup.js:97:348)
在运行jest-expo测试时出错了。如果有人有解决办法，请分享。
浏览 3提问于2017-11-04得票数 14
当我运行测试时，它会显示TypeError: run destructure属性'travelDatas‘of '(0，_GetTravelDatas.getTravelDatas)(.)’“因为它是未定义的.
如您所见，截图：
没有任何控制台错误或警告。
有人能帮忙吗？
travelListTest.spec.js
import { mount, shallowMount } from '@vue/test-utils'
import TravelList from '../../src/components/TravelList.vue'
i
浏览 1提问于2021-06-13得票数 1
回答已采纳
如果我尝试运行下面的内容(使用yarn run jest)，就会得到TypeError：_vm.$t不是一个函数，因为SearchField使用的是一个转换("$t('search')")。
import { mount } from "@vue/test-utils";
import SearchField from "@/components/ui/SearchField";
describe("SearchField", () => {
const wrapper = mount(SearchFi
浏览 1提问于2019-02-01得票数 2
回答已采纳
1回答
我试图在我的Vue组件上编写一个简单的Jest单元测试。
技术栈: TypeScript，VueJS，Jest，Webpack，
结构
root
- src
- invite
- accept.ts
- accept.vue
- test
- invite
- accept.ts
- app.ts
- jest.config.json
- package.json
在尝试使用Jest模拟依赖模块时，我一直在观察一些奇怪的行为。
src/invite/accept.ts
import Vue from &#
浏览 0提问于2018-05-16得票数 4
回答已采纳
在没有Vue CLI/Webpack/Babel设置的情况下，可以测试在普通javascript中开发的Vue组件吗？
到目前为止，我在Web上找到的亚喷气式飞机上的文档非常少：
我安装了Vue，Vue测试实用程序，JSDOM
My package.json :
{
"name": "GuichetUnique.CMS",
"version": "1.0.0",
"description": "",
"main": "index.js
浏览 8提问于2020-09-06得票数 3
回答已采纳
1回答
我需要使用Jest测试来编写这段代码：
componentDidUpdate(prevProps) {
if (prevProps.socialMediaId !== this.props.socialMediaId) {
if (typeof this.window.FB !== 'undefined') {
this.window.FB.XFBML.parse();
}
}
}
使用测试用例：
it('should test componentDidUpdate', () => {
p
浏览 0提问于2019-02-07得票数 0
回答已采纳
我想测试我的vue组件，但是我遇到了一些疯狂的错误，我做了人们喜欢使用jsdom的事情，没有修复它，并且一直显示这些错误：
console.error node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/virtual-console.js:29
Error: Not implemented: window.alert
或
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'addEventList
浏览 1提问于2020-02-10得票数 0
回答已采纳
在Vue 2.0应用程序中，假设我们有组件A、B和C。
A声明、注册和使用B
从A到B可以通过C吗？
就像这样：
<template>
<div class="A">
<B :child_component="C" />
</div>
</template>
在B中使用C。
<template>
<div class="B">
<C>Something else</C>
</div>
</t
浏览 3提问于2017-03-24得票数 64
回答已采纳
4回答
遵循，我尝试以编程方式在页面上创建组件的实例。
主要的片段如下：
import Button from 'Button.vue'
import Vue from 'vue'
var ComponentClass = Vue.extend(Button)
var instance = new ComponentClass()
instance.$mount()
this.$refs.container.appendChild(instance.$el)
然而，我得到了两个错误：
我试图实例化的组件包含对存储的引用，这些引用不起作用："TypeError
浏览 1提问于2018-11-09得票数 6
回答已采纳
1回答
如何定义空多维数组
、、、、
我需要在vuejs项目中使用多维数组模型。
代码的：
我在vuejs数据中定义了一个数组
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
arr: [[1,2],[3,4]]
}
})
和使用：
<p v-if="arr[3][0]">{{ arr[3][0] }} //Vue warn]: Error in render function: "TypeError: Cannot read property '1' of
浏览 6提问于2017-04-29得票数 0
回答已采纳
1回答
我只是想试一试。但是我得到了这个错误。捆绑失败: TypeError:无法读取未定义的属性“transformFile”
这是我的package.json文件
{
"name": "vueNativeDeneme",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
浏览 3提问于2019-12-01得票数 0
回答已采纳
我的vue版本: 2.1.10
Vue警告
呈现错误："TypeError:无法获得未定义或空引用的属性“
(在Root>中找到
TypeError:无法获得未定义或空引用的属性“Product”
Vue警告
属性或方法"*this*“不在实例上定义，而是在呈现过程中引用。通过初始化此属性，确保此属性是反应性的，无论是在data选项中，还是对于基于类的组件。见：。
(在Root>中找到)
Vue警告
呈现错误："TypeError:无法获得未定义或空引用的属性'order_id‘“
(在Root>中找到
浏览 0提问于2018-09-29得票数 1
1回答
我正在尝试对一个Vue组件进行单元测试，该组件动态地加载它的子组件。问题是Jest / Vue utils似乎无法呈现它。有办法这样做吗？
我的组件
<template>
<component :is="component" v-bind="props" />
</template>
<script>
const components = {
dog: () => import('./dog.vue'),
cat: () => import('./cat.vue&#
浏览 1提问于2022-06-27得票数 0
回答已采纳
我正在Vue 2.x、nuxtjs和@nuxtjs/composition api上测试Jest。然而，在通过jest进行测试时，组件中的状态值具有未定义的值 List.spec.js import Vue from 'vue';
import Vuetify from 'vuetify';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import List from '@/components/home/list.vue';
Vue.use(
浏览 19提问于2021-08-26得票数 1
我正在试用laravel应用程序中的vue厨师插件，我就是这样做的
<template>
<div class="tranbg" v-if="first">
<div>hello</div>
<button @click="turnOff">ok</button>
</div>
</template>
<script>
export default {
data(
浏览 0提问于2018-11-15得票数 0
回答已采纳
当我挂载一个组件时，我得到了什么(浅层我没有得到这个错误)，我得到了下面的错误。
TypeError:无法读取未定义的属性“创建”
在(node_modules/@material-ui/core/CircularProgress/CircularProgress.js stylesOrCreator
。
。
。
还请将此错误放在顶部：
node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/virtual-console.js Uncaught :无法读取未定义的属性“body2”
来自package.json的版本：
浏览 0提问于2020-07-27得票数 3
回答已采纳
我不能为我的简单组件编写Jest测试，因为它只有一个v-data-table Vuetify组件。我试图安装组件，但得到了一些错误“Vue warn: Error in render："TypeError: Cannot read property 'width‘of undefined in ->”。我是一个Jest测试的新手，所以这个问题让我抓狂……
这是我的测试文件。测试组件取自Vuetify文档页面...
import { mount } from '@vue/test-utils';
import vuetify from 'vuetif
浏览 34提问于2019-08-20得票数 5
我有“登录”函数，该函数在执行过程中结束：
res.status(202).json({ token, userId: user._id.toString() });
在测试中，我模拟res对象如下：
const res = {
status: jest.fn(),
json: jest.fn(),
};
但我得到了TypeError:无法读取属性'json‘的未定义。
当我在"login“函数中删除status()执行时&只留下json()，则不会引发错误。
我用Jest做测试。我做错了什么？
浏览 2提问于2020-04-22得票数 0
我有一个带有vue.js组件(MyComponent.vue)的vue-cli项目。
我试图从一个单独的文件中将一个过滤器(MyFilter.vue)导入到组件中。
如果我将过滤器导出为一个对象，但如果我将它导出为一个函数，它就不能工作。我遗漏了什么？
作品
//MyFilter.vue
<script>
export default {
capitalize: function(val){
return val.toUpperCase();
}
//export filter as object
}
</script>
浏览 1提问于2018-06-21得票数 0
回答已采纳
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
回答已采纳
我使用Vue与webpack模板，我试图运行测试与Jest。我还使用Pug来呈现模板。
但是当我运行测试时，我得到了一个错误：
[vue-jest] Error: Error: the "filename" option is required to use includes and extends with "relative" paths
at undefined line 2
at error (node_modules/vue-jest/lib/throw-error.js:2:9)
at module.exports (node_m
浏览 0提问于2018-07-18得票数 0
回答已采纳
1回答
我正在尝试在jest框架中测试这些方法。对于javascript方法，我能够使用require()函数从文件中导入方法并对其进行测试(expect( and (1，2).toBe(3)。但无法在VueJS方法中复制相同的内容。 // VueJS
export default defineComponent({
name: "App",
components: {
HelloWorld,
},
methods: {
addition(a: number, b: number) {
return a + b;
},
浏览 118提问于2021-07-06得票数 0
回答已采纳
在试图将一个功能组添加到我的地图时获取此错误：
TypeError:无法读取未定义的属性“_layerAdd”
抛出错误的代码片段：
<l-map
id="mapid"
:zoom="zoom"
:center="center"
/>
var map = document.getElementById("mapid").__vue__;
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
使用：
leafl
浏览 4提问于2019-11-05得票数 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
回答已采纳
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Error in mounted hook (Promise/async): "TypeError: Cannot read property 'get' of undefined"
found in
---> <Anonymous>
<Root>
console.error node_modules/vue/dist/vue.runtime.
浏览 24提问于2019-05-30得票数 1
1回答
我想翻译文本，我有这样的代码： title: {
type: String,
default: function () {
return this.$t("basic.confirm")
}
}, 我得到了这个错误： vue.common.dev.js?4650:630 Vue warn: nextTick中出错："TypeError:无法读取未定义的属性'$t‘“ 但当我在模板中使用时，工作正常： {{$t("basic.confirm")}}
浏览 7提问于2020-09-24得票数 0
回答已采纳
2回答
我需要升级项目从vue 2到vue3，我正在使用coreui模板。我升级了vue，vuex，vue-路由器。但是，当我为该项目服务时，它会在控制台中显示以下错误。
Uncaught (承诺中) TypeError:无法读取未定义的属性“_c”
终端没有错误。我已经用vue3语法更新了所有路由器，vuex，vue。
谢谢你的帮助
浏览 3提问于2020-11-25得票数 5
1回答
我有一个Vue2项目，并且使用Jest来测试我的代码。我开始测试一些示例代码，我简单地无法获得Jest来确定Vuetify v-alert组件是否可见。我已经尝试过内置的Jest方法，以及添加Jest和使用toBeVisible()方法，到目前为止，没有任何东西工作。
如果您查看Test.vue组件，默认情况下v-alert组件是隐藏的。(其样式设置为显示: none;)
单元测试表示应该通过expect(alert).not.toBeVisible()，但是不管v-alert模型设置为什么，它总是失败。如果我将测试更改为expect(alert).toBeVisible()，它将通过，而不管
浏览 0提问于2020-06-24得票数 2
我有一个组件，有一个输入和一个按钮。当用户在输入中键入业余爱好时，应该将要更新的字符串发送到api。我已经设置了我的测试，我正在测试组件是否存在，并得到错误的TypeError:无法读取未定义的属性'map‘时，当我console.log(组件)。它说组件是未定义的。
当我注释掉{this.state.hobbies.map()}节(包括第二个呈现和其中的所有内容)时，组件就能够呈现。
EditProfile.js
import React, { Component } from 'react';
import { MdDelete } from
浏览 0提问于2019-05-17得票数 6
对于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
npm运行生成给
错误TypeError:无法读取属性“匹配”的未定义。
- Building for production...
ERROR TypeError: Cannot read property 'match' of undefined
TypeError: Cannot read property 'match' of undefined
at VuetifyLoaderPlugin.apply (/usr/src/app/node_modules/vuetify-loader/lib/plugin.js:28:29)
浏览 0提问于2019-11-23得票数 6
回答已采纳
我对单元测试很陌生，我正在尝试测试在组件挂载时调用的函数。下面是我正在测试的组件代码：
<template>
<div>
<div class="grid">
<Card
class="grid_layout_col"
@showItemDetail="showDetails(index)"
@openEditModal="editItem(index)"
/>
</div>
浏览 3提问于2020-02-20得票数 1
回答已采纳
我将Moment.js注册为插件，如下所示：
import Vue from 'vue'
import moment from 'moment'
moment.locale('pt_BR')
Vue.use({
install (Vue) {
Vue.prototype.$moment = moment
}
})
现在，我需要在我的main.js过滤器中使用这个
import './plugins/moment'
Vue.filter('formatDate', value => {
浏览 3提问于2019-11-18得票数 0
回答已采纳
我一直在跟踪和，用vue-test-utils和vue 2在Rails 5.1上用webpacker安装jest测试。我能够在没有vue组件的情况下运行基本测试，但是尝试挂载vue组件会导致错误：
TypeError: Cannot create property '_Ctor' on string 'PostAddress'
7 |
8 | it('mounts', () => {
> 9 | let wrapper = shallow('PostAddress
浏览 2提问于2018-03-20得票数 5
回答已采纳
我正在尝试运行组合api组件的单元测试。我在Vue 2.7上使用TS和以下软件包：
"nuxt": "^2.15.8",
"@nuxtjs/composition-api": "^0.33.1",
"@vue/test-utils": "^1.3.0",
"jest": "^28.1.3",
问题是在组件挂载上引发以下错误：
SyntaxError: Unexpected token (1:1141)
at Parser.pp$4.raise (
浏览 29提问于2022-11-22得票数 1
我正在为我的应用程序使用Vue 3和Vue-Router，在使用useRoute()的组件上使用Jest创建单元测试时遇到了问题，如下所示： <template>
<div :class="{ 'grey-background': !isHomeView }" />
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useRoute } from
浏览 188提问于2020-12-09得票数 2
回答已采纳
有人能帮我指出这里可能出了什么问题吗？
我试图在测试用例中模拟在组件中使用的getter，但我总是得到未定义的getter
在这里，我已经在挂载中挂载了我的组件，并为存储创建了实例，并将其映射到我的挂载函数中。
describe('Get details', () => {
const mountFunction = options => {
return mount(Details, {
localVue,
...options
})
}
test('L
浏览 0提问于2020-10-23得票数 0
回答已采纳
测试onclick功能不起作用。返回不能读取未定义的属性“_isMockFunction”。下面我编写了示例代码。
我的页面: myComponent.js
const myComponent = () => {
const backToDashboard = async ({history})=>{
history.push("/home");
}
const submitResponse = async props => {
/* url calling here */
backToD
浏览 6提问于2020-06-08得票数 0
回答已采纳
我有一个组件，我们称之为Form.vue，它有一个按钮，可以触发这个组件的一个方法，在这个方法中我有一个存储操作。
我想在分派之后链接一个.then()函数，但是当我重新运行测试时，它现在失败了，出现了这样的消息: Error: Uncaught TypeError:无法读取未定义的属性‘那么’
如果我简单地注释.then()块，测试就会通过：
->，您知道如何解决这个问题吗？
Form.vue
<script lang="ts">
import { defineComponent } from "vue";
import { Axi
浏览 1提问于2021-08-24得票数 1
回答已采纳
在用Jest测试我的新VueJS项目时，我遇到了由道具验证引起的问题。
我所有的测试都有正确的模拟数据，从组件中通过验证器。
当我模拟wrong data并将它传递给组件时，我想测试一下情况。我知道当组件的validator返回false时，vue.common.js console.error如下：
console.error node_modules/vue/dist/vue.common.js:576
[Vue warn]: Invalid prop: custom validator check failed for prop "SOMETHING".
我想在Jest测
浏览 2提问于2017-11-24得票数 4
1回答
我运行测试时出现了错误：
TypeError:无法设置未定义的属性“背景”
6 | componentDidMount() {
7 | const element = ReactDOM.findDOMNode(this)
> 8 | element.style.background = 'grey'
| ^
9 | }
代码组件：
import React, { Component } from 'react';
import ReactDOM from 'react-dom'
浏览 1提问于2019-02-24得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
