Тесты проходят, когда запускаются один за другим, но набор тестов выдает ошибку - PullRequest
1 голос
/ 22 марта 2019

Я пытаюсь проверить поведение компонента формы. У меня есть следующий набор тестов:

import {createLocalVue, mount} from '@vue/test-utils'
import formDiscovery from '../pages/Discovery'
import Vuex from 'vuex'
import Buefy from 'buefy'
import VeeValidate, {Validator} from 'vee-validate'
import * as moduleContactInfos from '../store/contactInfos'
import * as moduleCompanyInfos from '../store/companyInfos'
import fr from 'vee-validate/dist/locale/fr'

let wrapper, store
beforeEach(() => {
  const localVue = createLocalVue()
  localVue.use(Vuex)
  localVue.use(VeeValidate)
  Validator.localize('fr', fr)
  localVue.use(Buefy)
  store = new Vuex.Store({
    modules: {
      contactInfos: moduleContactInfos,
      companyInfos: moduleCompanyInfos
    }
  })
  wrapper = mount(formDiscovery, {
    localVue,
    store,
    stubs: ['router-link']
  });
})

/*
    This test suite tests if a field is shown when the user selects a specific option in a select input
    and that this field is hidden when any other option is selected
*/
describe("field 'more details'", () => {
  it("is shown when the 'Other: specify' select option is selected", () => {
    wrapper.vm.$data.choiceCompanyInfos = 'Other: specify'
    wrapper.vm.$nextTick(() => {
      const input = wrapper.find('#moreDetails')
      expect(input.isVisible()).toBeTruthy()
    })
  })

  it('is hidden when a valid select option is selected', () => {
    wrapper.vm.$data.choiceCompanyInfos = 'A valid select option'
    wrapper.vm.$nextTick(() => {
      const input = wrapper.find('#moreDetails')
      expect(input.isVisible()).toBeFalsy()
    })
  })
})

/*
    This test suite tests is veevalidate generates the correct error messages
*/
describe('vee validate', () => {

  it('adds an error when a required form field is empty', async () => {
    const input = wrapper.find('[name="phone"]')
    expect(input.exists()).toBe(true)
    expect(wrapper.vm.errors.count()).toBe(0)
    store.commit('contactInfos/updatePhone', '')
    await wrapper.vm.$validator.validate('phone')
    expect(wrapper.vm.errors.count()).toBe(1)
  })

  it('adds an error when the phone has an invalid format', async () => {
    const input = wrapper.find('[name="phone"]')
    expect(input.exists()).toBe(true)
    expect(wrapper.vm.errors.count()).toBe(0)
    store.commit('contactInfos/updatePhone', '6156') // Valid format : 0?[0-9]{9}
    await wrapper.vm.$validator.validate('phone')
    expect(wrapper.vm.errors.count()).toBe(1)
    expect(wrapper.vm.errors.first('phone').indexOf('invalid')).toBeGreaterThan(-1) // The error message must contains 'invalid'
  })
})

Тестируемый компонент содержит несколько вложенных дочерних компонентов (поле формы, содержащее метку buefy, ввод buefy и т. Д.) Он также содержит два компонента nuxt-link.

Когда я запускаю тест самостоятельно, он работает. Тем не менее, если попытаться запустить набор описания или весь файл, у меня появляется следующая ошибка:

TypeError: Cannot read property '$scopedSlots' of undefined
    at updateChildComponent (.\node_modules\vue\dist\vue.common.dev.js:4100:27)
    at prepatch (.\node_modules\vue\dist\vue.common.dev.js:3128:5)

Я пытался воссоздать хранилище для каждого теста, чтобы создать новый экземпляр localVue для каждого теста. Ничего не работает. Есть идеи?

1 Ответ

0 голосов
/ 25 июля 2019

Я получил ту же ошибку и получил ее, используя sync: false при монтировании вашего компонента. Так что в вашем случае просто следуйте приведенному ниже коду.

 wrapper = mount(formDiscovery, {
    sync: false,
    localVue,
    store,
    stubs: ['router-link']
 });
...