Vue + Jest 无法读取未定义的属性“默认”

Posted 2023-02-22

【中文标题】Vue + Jest 无法读取未定义的属性“默认”

【英文标题】：Vue + Jest Cannot read property 'default' of undefined

【发布时间】：2020-05-23 00:44:15

【问题描述】：

我遇到了这个错误，我不知道是什么原因造成的。 类型错误：无法读取未定义的属性“默认” 我现在开始搞乱测试，如果错误很愚蠢，我深表歉意

App.vue

<template>
  <div id="app">
    <div :class="'d-flex': !isMobile(), 'd-flex toggled':isMobile()" id="wrapper">
      <lateral v-if="rota != '/login'" :show="show" />
      <div id="page-content-wrapper">
        <topo v-if="rota != '/login'" @show="show = $event" />
        <router-view />
      </div>
    </div>  

  </div>
</template>
<script>
import mapa from "@/components/painel/mapa.vue";
import topo from "@/components/painel/topo.vue";
import lateral from "@/components/painel/lateral.vue";
import  mapActions, mapGetters, mapState  from "vuex";
export default 
  components:  topo, lateral, mapa ,
  data() 
    return 
      rota: this.$route.path,
      show: undefined
    ;
  ,

  mounted() 
    if (this.accountId == undefined) 
      this.Me();
    
  ,
  computed: 
    ...mapState("login", ["accountId"]),
    ...mapGetters("login", ["getAccountId"]),
    ...mapGetters("property", ["getProperties"])
  ,
  watch: 
    $route(to, from) 
      this.rota = to.path;
      document.title = "AgroInteli "+to.name 

    ,
    getAccountId(to, from) 
      this.Account(to).then(resp => this.SetProperty());
    
  ,
  methods: 
    ...mapActions("login", ["Me"]),
    ...mapActions("property", ["Account", "SelectProperty", "SelectCrops"]),
    SetProperty() 
      if (this.getProperties.length > 0) 
        let property =
          sessionStorage.getItem("property") == null
            ? this.getProperties[0]
            : JSON.parse(sessionStorage.getItem("property"));
        this.SelectProperty(property);
        let crop = property.crops == undefined ? [] : property.crops;
        if (crop.length > 0) this.SelectCrops(crop[0]);
      
    ,
    isMobile() 
      if(/android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) 
        return true
       else 
        return false
      
    ,

  ,

;
</script>
<style scoped lang="scss">
#app 
  height: 100%;
  width: 100%;


</style>

包.json

    "name": "agroninteli-web-vue",
    "version": "0.1.0",
    "private": true,
    "scripts": 
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "test": "jest"
    ,
    "dependencies": 
        "@fullcalendar/core": "^4.3.1",
        "@fullcalendar/daygrid": "^4.3.0",
        "@fullcalendar/interaction": "^4.3.0",
        "@fullcalendar/timegrid": "^4.3.0",
        "@fullcalendar/vue": "^4.3.1",
        "axios": "^0.19.0",
        "babel-preset-env": "^1.7.0",
        "chart.js": "^2.9.3",
        "core-js": "^3.3.2",
        "html2canvas": "^1.0.0-rc.5",
        "html2pdf.js": "^0.9.1",
        "jspdf": "^1.5.3",
        "jspdf-autotable": "^3.2.11",
        "leaflet": "^1.6.0",
        "register-service-worker": "^1.6.2",
        "vue": "^2.6.10",
        "vue-carousel": "^0.18.0",
        "vue-docgen-api": "^4.7.6",
        "vue-json-excel": "^0.2.98",
        "vue-router": "^3.1.3",
        "vue-toastify": "^1.0.3",
        "vue2-leaflet": "^2.2.1",
        "vueperslides": "^2.2.0",
        "vuex": "^3.0.1"
    ,
    "devDependencies": 
        "@babel/plugin-transform-modules-commonjs": "^7.8.3",
        "@vue/cli-plugin-babel": "^4.0.0",
        "@vue/cli-plugin-pwa": "^4.0.0",
        "@vue/cli-plugin-unit-jest": "^4.0.0",
        "@vue/cli-service": "^4.0.0",
        "@vue/test-utils": "^1.0.0-beta.29",
        "babel-core": "^7.0.0-bridge.0",
        "babel-jest": "^25.1.0",
        "babel-plugin-syntax-class-properties": "^6.13.0",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-preset-vue": "^2.0.2",
        "jest": "^25.1.0",
        "jest-transform-stub": "^2.0.0",
        "node-sass": "^4.12.0",
        "sass-loader": "^7.1.0",
        "stylus": "^0.54.7",
        "stylus-loader": "^3.0.2",
        "vue-jest": "^3.0.5",
        "vue-template-compiler": "^2.6.10"
    ,
    "jest": 
        "moduleFileExtensions": [
            "js",
            "json",
            "vue"
        ],
        "transform": 
            ".*\\.(vue)$": "vue-jest",
            "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
            "\\.js$": "<rootDir>/node_modules/babel-jest",
            ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
        ,
        "moduleNameMapper": 
            "^@/(.*)$": "<rootDir>/src/$1"
        ,
        "transformIgnorePatterns": [
            "node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)"
        ]
    

我从 vue-test-utils 页面上拿了这个例子，这是最基本的例子 example.spec.js

import  mount  from '@vue/test-utils'
import main from '@/App.vue'

describe('Component', () => 
  test('is a Vue instance', () => 
    const wrapper = mount(main)
    console.log(wrapper)
    expect(wrapper.isVueInstance()).toBeTruthy()
  )
)

如果有人能帮我找出我的错误，我将不胜感激。

【问题讨论】：

很难说。尝试模拟商店并再次检查。一定有什么东西（可能是一些吸气剂）试图从它没有找到的东西中获取.default。

它运行不一样，我删除了应用程序内的所有内容，我只留下了基础

有同样的问题。据我所知，它正在尝试在正确初始化之前访问一些组件数据

对我来说，结果证明是导入中的一个错误，由于某种原因，IDE 和运行时都没有捕获到该错误。 This article may help

@CesarMartinezDominguez 您在上述评论中的文章链接链接到当前的 SO 页面。另外，如果您找到解决方案，您可以发布答案吗？

【参考方案1】：

尝试一下（为我工作）：

test('is a Vue instance', () => 
  const wrapper = mount(main)
  expect(wrapper.vm).toBeTruthy()
)

【参考方案2】：

对我来说，我的项目使用的是 JSX，不知何故 VTI 与 slots.default() 存在一些问题。我删除了它，错误就消失了。

您可能没有使用 JSX，但正如 @Adam Orlov 所说，可能有一些东西试图获取 .default 但没有得到它，不知何故，它不是由像 Eslint 这样的 linter 建立的。

您可以再次检查您的代码，也许您可​​以找到它。

【讨论】：

这没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review