Vue Композиция Api с Vuetify не проходит модульное тестирование с шуткой - PullRequest
Новая
       24

Vue Композиция Api с Vuetify не проходит модульное тестирование с шуткой

2 голосов
/ 13 февраля 2020

Я пытаюсь запустить модульные тесты на vue компонентах, компоненты пишутся с помощью пакета @ vue /position-api, и они также используют vuetify.

Приложение запускается, как и ожидалось, но когда я запускаю тесты У меня нет доступа к свойству точки останова в контексте. root. $ vuetify. Когда я печатаю контекст. root. $ Vuetify a видит экземпляр компонента vue.

Ошибка "Не удается прочитать свойство 'mdAndDown' undefined", когда я пытаюсь получить к нему доступ таким образом: 

context.root.$vuetify.breakpoint.mdAndDown

Это мой конфигурационный файл шутки: 

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
  transform: { '^.*\\.js$': 'babel-jest' },
  transformIgnorePatterns: ['node_modules/(?!vue-router|@babel|vuetify)'],
  setupFiles: [
    "<rootDir>/tests/unit/setup-env.ts",
  ],
};

Это файл компонента: 

<template>
  <v-app
    class="sst-app-container"
  >
    <cmp-loading
      v-show="!loadedBasic"
    />
    <div
      id="app-wrp"
      v-show="loadedBasic"
    >
      <cmp-side-bar />
      <v-content
        class="fill-height"
      >
        <router-view></router-view>
      </v-content>
    </div>
  </v-app>
</template>

<script lang="ts">
import {
  computed, createComponent, onMounted, reactive, toRefs, watch,
} from '@vue/composition-api';
import basicSetup from '@/modules/core/composables/basic-setup';
import initMd from '@/modules/core/devices/mouse/composables/init-md';
import store from '@/stores';
import cmpSideBar from '../components/sidebar/CoreSideBar.mouse.vue';
import cmpLoading from '../components/loading/CoreLoading.vue';


export default createComponent({
  components: {
    cmpLoading,
    cmpSideBar,
  },
  setup(props, context) {
    console.log(context.root.$vuetify)
    const basics = basicSetup();

    return {
      ...basics,
    };
  },
});
</script>

Это мой тест: 

import Vue from 'vue';
import Vuetify from 'vuetify';
import BtnCmp from '../../../../../components/vc-btn.vue';
import CmApi from '@vue/composition-api';
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import {
  faPlug,
  faSignOut,
  faCog,
  faUser,
  faTachometer,
  faArrowLeft,
  faArrowRight,
} from '@fortawesome/pro-duotone-svg-icons';

library.add(
  faPlug,
  faSignOut,
  faCog,
  faUser,
  faTachometer,
  faArrowLeft,
  faArrowRight,
);

import { Breakpoint, Theme, Application, Goto, Icons, Lang, Presets } from 'vuetify/lib/services';
import {
  mount,
  createLocalVue,
} from '@vue/test-utils';
import Core from '../views/Core.mouse.vue';

const vue = createLocalVue();

vue.component('font-awesome-icon', FontAwesomeIcon);
vue.component('vc-btn', BtnCmp);

vue.use(Vuetify);
vue.use(CmApi);

describe('Core', () => {
  let vuetify;

  beforeEach(() => {
    vuetify = new Vuetify({
      mocks: {
        breakpoint: new Breakpoint({
          breakpoint: {
           scrollBarWidth: 0,
           thresholds: {
             xs: 0,
             sm: 0,
             md: 0,
             lg: 0,
           },
        },
      },
    });
  });

  it('renders the correct markup', async () => {
    // Now mount the component and you have the wrapper
    const wrapper = mount(Core, {
      localVue: vue,
      vuetify,
      stubs: ['router-link', 'router-view'],
      mocks: {
        $t: () => 'some specific text'
      },
    });

    expect(wrapper.html()).toContain('....');
  });
});
...