vue-test-utils - как обрабатывать $ refs?

СИТУАЦИЯ

Я пытаюсь shallowMount использовать компонент, но безуспешно.

Компонент использует $refs для чтения высоты div. Это значение считывается внутри вычисляемого свойства. Затем в жизненном цикле mounted я сохраняю это значение в магазине.

Сама логика проста и работает нормально. Но в наборе тестов установка компонента прерывается, потому что ключ $refs равен undefined.

Для ясности: я не собираюсь тестировать $refs, мне просто нужно смонтировать компонент и перейти к фактическому модульному тестированию.

КОМПОНЕНТ

Это разметка:

<div ref="tgmp">

Я сохраняю высоту div в вычисляемом свойстве:

computed: {
  barH() {
    return this.$refs.tgmp.clientHeight
  }
}

А затем, в смонтированном жизненном цикле, я фиксирую значение в магазине:

this.$store.commit('setBarHeight', this.barH)

ТЕСТ

Это тест. Я пропустил ненужные вещи, например, установку магазина в localVue.

beforeEach(() => {
  wrapper = shallowMount(Bar, {
    store,
  })
})

test('is a Vue instance', () => {
  expect(wrapper.isVueInstance()).toBeTruthy()
})

ОШИБКА

Error in mounted hook: "TypeError: Cannot read property 'clientHeight' of undefined"

«TypeError:

ПОПЫТКА

Я где-то пытался найти решение, но не нашел. Я пытался издеваться над $ refs, но безуспешно:

wrapper = shallowMount(ThePlayerBar, {
  store,
  mocks: {
    $refs: {
      tgmp: {
        clientHeight: 600
      }
    }
  }
})

ВОПРОС

Как я могу смонтировать компонент, который делает нас $refs в mounted жизненном цикле?


javascript unit-testing jestjs vue.js vue-test-utils
person FrancescoMussi    schedule 15.04.2020    source источник
comment
Я не уверен, что происходит с refs в shallowMount, но вы можете попробовать mount с конкретными заглушками или смоделировать computed.   -  person Estus Flask    schedule 15.04.2020
comment
@EstusFlask благодарим за ответ! Вроде работает. Я сделаю еще кое-что, чтобы убедиться в этом. Если хотите, можете ответить, так как это кажется правильным решением.   -  person FrancescoMussi    schedule 15.04.2020
comment
Я проверил и ожидаю, что в вашем случае будет рефери. Вероятно, <div ref="tgmp"> не существует, когда вы его визуализируете, возможно, если он является дочерним элементом другого компонента или затронут директивой.   -  person Estus Flask    schedule 15.04.2020

Ответы (1)


arrow_upward
5
arrow_downward

shallowMount должен предоставлять ссылки, поэтому this.$refs.tgmp должен быть <div> элементом в случае, если <div ref="tgmp"> существует в представлении при первоначальном рендеринге.

$refs не должен подвергаться насмешкам, потому что это внутреннее свойство, присваиваемое при инициализации компонента. Это вычисляемое свойство, которое полагается на ссылку, поэтому при необходимости его можно высмеять, поскольку ожидается, что высота элемента в JSDOM будет равна 0:

jest.spyOn(ThePlayerBar.options.computed, 'barH').mockReturnValue(600);

Or:

  wrapper = shallowMount(Bar, {
    store,
    computed: { barH: () => 600 }
  })
person Estus Flask    schedule 15.04.2020
comment
Спасибо за ответ. Этот шпион, похоже, не работает. Я получаю такие ошибки, как: Невозможно прочитать свойство "вычислено" из неопределенного. Свойство barH не имеет типа доступа get. Но мне удалось заставить его работать, заглушив вычисляемое свойство, как вы предложили в комментарии: computed: { barH() { return 60 }} Этот spyOn вы тестировали в этом состоянии? Если вы можете отредактировать ответ или я могу добавить эту вычисленную заглушку в качестве редактирования к моему вопросу. - person FrancescoMussi; 15.04.2020
comment
Я обновил ответ обоими способами. Я не уверен, при каких условиях шпион может выйти из строя, потому что компоненты options открыты, и это работало для меня раньше, но я исправил это, чтобы jest.spyOn без get. - person Estus Flask; 15.04.2020