Vue + Jest Cannot read property 'default' of undefined

Question

I'm getting this error, and I don't know what is causing it.
TypeError: Cannot read property 'default' of undefined
I started messing with tests now, if the error is stupid I apologize

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>

Package.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)"
        ]
    }
}

I took this example from the vue-test-utils page, it's the most basic example 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()
  })
})

If someone could help me find my mistake i would be very grateful.

It is hard to say. Try mocking store and check again. There must be something (maybe some getter) which is trying to get .default from something it didn't find. — Adam Orlov
it didn't run the same, I deleted everything inside the app, I left only the basics — Carlos Eduardo Ilgenfritz
Having the same issue. From what I can see it is trying to access some component data before proper initialisation — Cesar Martinez Dominguez
To me it turned out to be a mistake in the imports that for some reason wasn't caught by the IDE nor the runtime. This article may help — Cesar Martinez Dominguez
@CesarMartinezDominguez Your article link in the above comment links to the current SO page. Also, can you post an answer if you found a solution? — trainoasis

Jorge Epuñan Jorge Epuñan · Accepted Answer · 2021-03-23T18:27:43

try maybe (working for me):

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

Vue + Jest Cannot read property 'default' of undefined

1 Answers