Как тестировать Vue компонент изолированно?

Есть у меня компонент, его нужно тестировать
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 })
})

Однако всплывает куча ошибок,
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"]
}
  • Вопрос задан
  • 49 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы