When attempting to import a store in the routes.js file while running Jest tests in Vue.js, an error

Question

When attempting to import a store in the routes.js file while running Jest tests in Vue.js, an error

My current setup involves using vue-test-utils along with jest for Test-Driven Development (TDD). In the route file (routes.js) of my Vue.js application, I have imported the $store object and utilized it for various functionalities. While writing a basic unit test for the login page, I encountered an error even before any tests could be executed.

Error:

   TypeError: Cannot read property 'state' of undefined

      130 |             isAuth: true,
    > 131 |             layout: $store.state.dom.isMobile ? mobileSinglePage : panel
          |                            ^

route.js:

import $store from "../store"

// --------- layouts
import panel from "../layout/panel";
import mobileSinglePage from "../layout/mobileSinglePage";
import MainLayout from "../layout/index";
import auth from "../layout/auth"


// transactions
import _transaction from "../pages/transaction/_transaction"

const routes = [
    {
        path: "",
        component: MainLayout,
        children: [
            {
                path: "",
                redirect: "/panel/dashboard",
            },
            {
                path: "login",
                component: login,
                name: "login",
                meta: { 
                     preventLoggedIn: true,
                     layout: auth
                }
            },
            {
                path: "/panel/transactions/:url",
                name: "_transactions",
                component: _transaction,
                meta: { 
                    isAuth: true,
                    layout: $store.state.dom.isMobile ? mobileSinglePage : panel
                }
            },
            {
                path: "*",
                name: 'error_page',
                redirect: '/404'
            }
        ],
    },
];
export default routes;

login.spec.js



import { mount, createLocalVue } from "@vue/test-utils"
import login from '@/pages/auth/login'
import Vuex from "vuex"

const localVue = createLocalVue()
localVue.use(Vuex)


describe("login", () => {
    it("simple test", () => {
        const wrapper = mount(login, {
            localVue,
            data(){
                return {
                    form: {
                        mobile_number: '',
                    },
                }
            },
        })
        wrapper.find('#login').text()

    })
})

Login.vue

<template>
  <div class="w-100">
    <transition>
      <form @submit.prevent="requestOtp" class="w-100" v-if="step === 1">
        <MobileInput
            ref="mobile_number"
            v-model="form.mobile_number"
            autocomplete="false"
            outlined
            :counter="false"
            label="mobile number"
        />
        <AppButton
            :disabled="!form.mobile_number || form.mobile_number.length !== 11"
            type="submit"
            color="secondary"
            large
            :loading="loading"
            class="w-100 fontMobileMedium font0.875 loginBtn">
          login
        </AppButton>
      </form>
    </transition>
    <transition>
      <form @submit.prevent="verifyOtp" v-if="step === 2">
        <AppPinCode
            autofocus
            dir="ltr"
            :disabled="loading"
            :length="6"
            class="mb-6"
            @complete="verifyOtp"
            v-model="form.otpCode"/>
        <AppButton
            type="submit"
            :loading="loading"
            :disabled="!form.otpCode"
            color="secondary"
            large
            class="w-100 fontMobileMedium font0.875 ">
          login
        </AppButton>
      </form>
    </transition>
  </div>
</template>
<script>
    // Import statements and code for Login.vue...
</script>

store/dom.js(store module)

// Code for store dom.js...

store/index.js

// Code for store index.js...

It seems that the error related to the router object is being thrown in the test file without explicitly using it. This issue needs further investigation.

javascript vue.js jestjs vue-test-utils

Answer 1

Answer №1

It seems like your Login.vue file is utilizing both router (

this.$router.push({name: 'dashboard'})

) and store (...mapActions('main', ['crud']),), but neither are given during mount.

You may want to provide both of them:

import { mount, createLocalVue } from "@vue/test-utils"
import login from '@/pages/auth/login'
import Vuex from "vuex"
import VueRouter from "vue-router"

const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(VueRouter)


const store = new Vuex.Store({
  state: {
    // Define your minimal default state here
  },
  actions: {
    // At least include the 'main.crud' action here
  }
})

const routes = [
  // Include minimal routes here
]

const router = new VueRouter({ routes })

describe("login", () => {
    it("simple test", () => {
        const wrapper = mount(login, {
            router,
            store,
            localVue,
            data(){
                return {
                    form: {
                        mobile_number: '',
                    },
                }
            },
        })
        wrapper.find('#login').text()

    })
})

For more information, check out here and here.

Additionally, make sure to place mapActions() in the methods section rather than data (Refer to here).

Answer 2

It seems like your Login.vue file is utilizing both router (

this.$router.push({name: 'dashboard'})

) and store (...mapActions('main', ['crud']),), but neither are given during mount.

You may want to provide both of them:

import { mount, createLocalVue } from "@vue/test-utils"
import login from '@/pages/auth/login'
import Vuex from "vuex"
import VueRouter from "vue-router"

const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(VueRouter)


const store = new Vuex.Store({
  state: {
    // Define your minimal default state here
  },
  actions: {
    // At least include the 'main.crud' action here
  }
})

const routes = [
  // Include minimal routes here
]

const router = new VueRouter({ routes })

describe("login", () => {
    it("simple test", () => {
        const wrapper = mount(login, {
            router,
            store,
            localVue,
            data(){
                return {
                    form: {
                        mobile_number: '',
                    },
                }
            },
        })
        wrapper.find('#login').text()

    })
})

For more information, check out here and here.

Additionally, make sure to place mapActions() in the methods section rather than data (Refer to here).

When attempting to import a store in the routes.js file while running Jest tests in Vue.js, an error

Answer №1

Similar questions

Whenever a user tries to retrieve a page using ajax and then proceeds to submit the form associated with that page, they encounter

What is the procedure for placing an item into a vacant area in react-dnd?

The dropdown menu is dynamically populated based on the selection from another dropdown menu, with options retrieved from

Can we accurately pinpoint individual LineSegments in three.js by hovering over them, especially those with unique geometries?

Unable to execute a JavaScript function when triggered from an HTML form

Creating a PDF document using html2pdf: A step-by-step guide

Tips for serializing the execution of an array of observables

Encountering a JavaScript/TypeScript issue that reads "Unable to access property 'Items' as it is undefined"

Retrieve a single document from Firestore and assign it to a variable

The best practices for integrating Firebase with REST APIs

The attempted use of Wget with JavaScript integration was unsuccessful

Resolving CORS problem: Eliminating the 'Access-Control-Allow-Origin' Response Header in Angular

Guide: Installing Vuetify 2.5.6 on Vue 3

Can I obtain a link through the branch_match_id parameter?

"Encountering an issue with the parameter 'undefined' in the .find()

Is there a way for me to insert a variable into the src attribute of my img tag like this: `<img alt="Avatar" src=`https://graph.facebook.com/${snAvatarSnuid}/picture`>`

Passing and Retrieving Specific Item from Mapped Array in React/Mobx: A guide on sending a single item from a mapped array to another component and accessing only

Searching for the most recent selected element from a multiple select tag in jQuery

My applications are not firing the deviceready event as expected

Display the DIV specifically for visitors arriving from Facebook