A
A
Artur Galyaev2020-12-27 13:31:16
Vue.js
Artur Galyaev, 2020-12-27 13:31:16

How to test a Vue component in isolation?

I have a component, it needs to be tested

import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';;
import VueRouter from 'vue-router';
import PlannedBudget from '@/components/Planner/PlannedBudget.vue';
import store from '@/store';

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

test("test", () => {
  const wrapper = shallowMount(PlannedBudget, { store, localVue, router })
})

However, there are a lot of errors
TypeError: Cannot read property 'state' of undefined
        at C:\Users\sagadav\Desktop\project\src\router\index.js:16:27
В Router Index мне нужно проверить стейт, но в тестах этот файл не используется, почему Jest его использует и кидает ошибку? 

    [Vue warn]: Cannot find element: #app

      53 |     store,
      54 |     render: h => h(App)
    > 55 | }).$mount("#app")
         |    ^
      56 |
      57 | export default $app
      58 |

jest.config.js
module.exports = {
  moduleFileExtensions: ["js", "json", "vue"],
  transform: {
    "^.+\\.vue$": "vue-jest",
    "^.+\\.(js|jsx)?$": "babel-jest",
    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
    "jest-transform-stub",
  },
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
    "^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
    '^vue$': 'vue/dist/vue.common.js',
  },
  transformIgnorePatterns: ["<rootDir>/node_modules/"]
};

babel.config.js
module.exports = {
    presets: ["@vue/cli-plugin-babel/preset"]
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question