Модульное тестирование компонента vue, используя vue-cli, не может проверить родительские методы? - PullRequest
Новая
       40

Модульное тестирование компонента vue, используя vue-cli, не может проверить родительские методы?

0 голосов
/ 16 октября 2018

Я сталкиваюсь с этой проблемой, которую не могу понять, и, глядя вокруг, я не вижу никого, кто задает те же вопросы ...

Итак, вот мой рабочий код:

main.js: 

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

window.Vue = Vue

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  methods: {
    greetings: function () {
      return 'good morning'
    }
  },
  render: h => h(App)
})

router / index.js: 

import Vue from 'vue'
import Router from 'vue-router'
import Configurations from '@/components/Configurations'

Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/configs',
      name: 'Configurations',
      component: Configurations
    }
  ]
})

App.vue: 

<template>
    <router-view></router-view>
</template>
<script>
export default {
  name: "App"
};
</script>

Configurations.vue: 

<template>
<span>{{greetings}}</span>
</template>

<script>
export default {
  name: "configurations",
  data() {
    return {
      greetings: ""
    };
  },
  created: function() {
    this.greetings = this.$root.greetings();
  }
};
</script>

Когда я запускаю это, он отображает страницу со словами «доброе утро».Ничего больше.Как видите, приветственное сообщение определено в файле main.js, потому что в этом сценарии я хотел бы, чтобы сообщение отображалось на всех компонентах, а именно: примечание об авторских правах.Поэтому я установил сообщение об общем предке для всех моих компонентов.

Насколько я понимаю, для вызова метода из "родительского" компонента вы используете его. $ Root.yourMethod () для его вызова.

Теперь проблема в том, что, если я хочу запустить модульное тестирование для компонента «Конфигурации», я получаю сообщение об ошибке, которое заставляет меня поверить, что, как у меня все настроено, я не могу проверить это.$ root.greetings (), потому что что-то говорит мне, что среда тестирования не знает об отношениях родитель-потомок между компонентами.

Итак, когда я запускаю: 

cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

Наличие следующего тестанастройка файла:

Configurations.spec.js : 

import Configurations from '@/components/Configurations'
import Vue from 'vue'

describe('Configurations.vue', () => {
  it('should display a greetings message', () => {
    const Constructor = Vue.extend(Configurations)
    const ConfigurationsComponent = new Constructor().$mount()
    expect(ConfigurationsComponent.greetings).to.not.be.undefined;
  })
})

Я получаю: 

> 16 10 2018 09:28:35.184:INFO [karma]: Karma v1.7.1 server started at
> http://0.0.0.0:3000/ 16 10 2018 09:28:35.191:INFO [launcher]:
> Launching browser PhantomJS with unlimited concurrency 16 10 2018
> 09:28:35.204:INFO [launcher]: Starting browser PhantomJS 16 10 2018
> 09:28:40.977:INFO [PhantomJS 2.1.1 (Windows 8.0.0)]: Connected on
> socket WnDl-mQqmNZQOfyzAAAA with id 10303480 ERROR LOG: '[Vue warn]:
> Error in created hook: "TypeError:  is not a constructor (evaluating
> 'this.$root.greetings()')"

(за ним следуют дополнительные строки, которые переполнение стека не позволит мне опубликовать, потому что они содержат слишком много ссылок)

Теперь, если бы я изменил 

this.greetings = this.$root.greetings()

на: 

this.greetings = "good morning";

В файле Configurations.vue , а затем снова запустить тестовую команду, я получу: 

> 16 10 2018 09:48:43.174:INFO [karma]: Karma v1.7.1 server started at
> http://0.0.0.0:3000/ 16 10 2018 09:48:43.180:INFO [launcher]:
> Launching browser PhantomJS with unlimited concurrency 16 10 2018
> 09:48:43.555:INFO [launcher]: Starting browser PhantomJS 16 10 2018
> 09:48:49.228:INFO [PhantomJS 2.1.1 (Windows 8.0.0)]: Connected on
> socket o8BQ24wv1QX26SAZAAAA with id 53463701
> 
>   Configurations.vue
>     √ should display a greetings message
>
> PhantomJS 2.1.1 (Windows 8.0.0): Executed 1 of 1 SUCCESS (0.024 secs / 0.017 secs)
>
> TOTAL: 1 SUCCESS

(за которым следует некоторая другая информация, которая не имеет отношения к делу)

Итак, как мне запустить модульный тест для компонента, который содержит вызовы этого метода. $ Root method?

Любая помощь приветствуется.

  • Лукас

1 Ответ

0 голосов
/ 16 октября 2018

Вы (почти) никогда не должны вызывать что-либо из родительского компонента.

У вас есть 2 возможности: 1. Использовать хранилище vuex и сохранять там свои данные.Тогда каждый нуждающийся компонент может получить к нему доступ через магазин.2. Предоставьте необходимые данные в качестве реквизитов для ваших дочерних компонентов.

Поскольку реквизит становится очень запутанным, рекомендуем использовать хранилище.

Если вы сделаете это, ваши тесты станут намного понятнееи легче читать.

Простой тест с поддельным магазином (просто чтобы показать, как все может быть): 

describe('MyComponent', () => {
  let wrapper

  beforeEach(() => {
    const localVue = createLocalVue()
    wrapper = mount(MyComponent, {
      localVue,
      mocks: {
        $store: {
          getters: {
            'copyright': 'MyCopyright text'
          }
        }
      }
    })
  })

  it('should display copyright text', () => {
    expect(wrapper.text('MyCopyright text')).toBe(true) 
  })
})
...