【问题标题】:Vue + Jest Cannot read property 'default' of undefinedVue + Jest 无法读取未定义的属性“默认”
【发布时间】: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 页面。另外,如果您找到解决方案,您可以发布答案吗?

标签: javascript vue.js vuejs2 jestjs vue-test-utils


【解决方案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 建立的。

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

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-08-08
    • 2020-12-13
    • 1970-01-01
    • 2019-01-30
    • 2021-12-18
    • 1970-01-01
    • 2021-04-30
    • 2017-03-01
    相关资源
    最近更新 更多