vue -test-utils - как обращаться с $ refs? - PullRequest
Новая
       68

vue -test-utils - как обращаться с $ refs?

1 голос
/ 15 апреля 2020

СИТУАЦИЯ

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

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

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

Для ясности: я не собираюсь тестировать $refs, Мне просто нужно смонтировать компонент и продолжить выполнение реального юнит-тестирования.

КОМПОНЕНТ

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

<div ref="tgmp">

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

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

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

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

ТЕСТ

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

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: Cannot read property 'clientHeight' of undefined

ПОПЫТКА

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

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

ВОПРОС

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

1 Ответ

1 голос
/ 15 апреля 2020

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

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

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

Или: 

  wrapper = shallowMount(Bar, {
    store,
    computed: { barH: () => 600 }
  })
...