When Unit Testing with headless chrome, Vuex Store is undefined - vue.js

Question

I'm just trying to test a simple component. I inherited a project and it was set up with Vue CLI 2 and it looks very boilerplatey. My issue is I'm trying to unit test anything I devote to the project. However, I'm having issues with the vuex store coming up as undefined. It's preventing me from testing and I haven't figured it out yet.
I googled around and found multiple things including this. Vue.js and vuex: this.$store is undefined
This is the error message I'm receiving
> cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run
07 08 2019 14:52:06.948:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/07 08 2019 14:52:06.958:INFO [launcher]: Launching browser ChromeHeadless with unlimited
concurrency
07 08 2019 14:52:07.006:INFO [launcher]: Starting browser ChromeHeadless
07 08 2019 14:52:17.675:INFO [HeadlessChrome 75.0.3770 (Windows 10.0.0)]: Connected on socket KXXgp_cAT4JbkbufAAAA with id 2108708
HeadlessChrome 75.0.3770 (Windows 10.0.0) WARN LOG: '[vue-router] Duplicate named routes
definition: { name: "load-balancing", path: "/networking/load-balancing/:ServiceRequestId/edit" }'
07 08 2019 14:52:20.798:WARN [web-server]: 404: /static/img/oops.png
HeadlessChrome 75.0.3770 (Windows 10.0.0) WARN LOG: '[vue-router] Duplicate named routes
definition: { name: "resource-groups", path: "/portal/resource-groups/:ResourceGroupId" }'
HeadlessChrome 75.0.3770 (Windows 10.0.0) WARN LOG: '[vue-router] Duplicate named routes
definition: { name: "manage-service-offerings", path: "/portal/admin/service-offerings/new" }'
HeadlessChrome 75.0.3770 (Windows 10.0.0) WARN LOG: '[vue-router] Duplicate named routes
definition: { name: "manage-service-offerings", path: "/portal/admin/service-offerings/:Id" }'
HeadlessChrome 75.0.3770 (Windows 10.0.0) ERROR LOG: '[Vue warn]: Cannot find element: #app'
HeadlessChrome 75.0.3770 (Windows 10.0.0) WARN LOG: '[Vuetify] Unable to locate target [data-app]
found in
---> <VDialog>
<VApp>
<App> at src/App.vue
<Root>'
HeadlessChrome 75.0.3770 (Windows 10.0.0) WARN LOG: '[Vuetify] Unable to locate target [data-app]
found in
---> <VDialog>
<VApp>
<App> at src/App.vue
<Root>'
ERROR LOG: '[Vuetify] Image load failed
src: /static/img/oops.png
found in
---> <VImg>
<VCard>
<ThemeProvider>
<VDialog>
<VApp>
<App> at src/App.vue
<Root>'
ERROR LOG: '[Vue warn]: Error in config.errorHandler: "TypeError: Cannot read property 'state' of undefined"'
ERROR LOG: TypeError{}
ERROR LOG: '[Vue warn]: Error in render: "TypeError: Cannot read property 'state' of undefined"
found in
---> <UserDropdownMenu> at src/components/common/UserDropDownMenu.vue
<Root>'
ERROR LOG: TypeError{}
User.vue
× should have a default value of false for user-menu
TypeError: Cannot read property 'state' of undefined
at VueComponent.mappedState (webpack:///node_modules/vuex/dist/vuex.esm.js:791:0 <- index.js:5858:31)
at Watcher.get (webpack:///node_modules/vue/dist/vue.esm.js:3142:0 <- index.js:10010:25)
at Watcher.evaluate (webpack:///node_modules/vue/dist/vue.esm.js:3249:0 <- index.js:10117:21)
at VueComponent.computedGetter [as User] (webpack:///node_modules/vue/dist/vue.esm.js:3507:0 <- index.js:10375:17)
at VueComponent.userPhoto (webpack:///src/components/common/UserDropDownMenu.vue:35:0 <- index.js:25280:49)
at Watcher.get (webpack:///node_modules/vue/dist/vue.esm.js:3142:0 <- index.js:10010:25)
at Watcher.evaluate (webpack:///node_modules/vue/dist/vue.esm.js:3249:0 <- index.js:10117:21)
at VueComponent.computedGetter [as userPhoto] (webpack:///node_modules/vue/dist/vue.esm.js:3507:0 <- index.js:10375:17)
at Object.get (webpack:///node_modules/vue/dist/vue.esm.js:1943:0 <- index.js:8811:20)
at Proxy.render (webpack:///src/components/common/UserDropDownMenu.vue?bfff:19:26 <- index.js:85974:37)
HeadlessChrome 75.0.3770 (Windows 10.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.746 secs / 0.01 secs)
I just want to know why store isn't rendering correctly
Here is the simple test that I wrote
import {expect} from 'chai'
import {shallowMount} from '#vue/test-utils'
import UserDropDownMenu from '#/components/common/UserDropDownMenu.vue'
describe('User.vue', () => {
it('should have a default value of false for user-menu', () => {
const wrapper = shallowMount(UserDropDownMenu)
const vm = wrapper.vm
const data = vm.$data
expect(data.UserDropDownMenu).to.equal(false)
})
})