Как вы устанавливаете значения данных в компоненте с помощью Vue-Test-Utils перед вызовом монтирования?

Я использую Jest с Vue-Test-Utils. Код, который я использовал, выглядит так:

beforeEach(() => {
  wrapper = shallow(GridContainer, {
    data: {
      pageSize: count
    },
    propsData: {
      userId,
      managerId
    }
  })
})

В этом примере я хочу установить значение pageSize до вызова смонтированного жизненного цикла. Проблема с приведенным выше кодом заключается в том, что при запуске тестов я начал получать следующее предупреждение:

[Vue warn]: Do not use built-in or reserved HTML elements as component id: data

Когда я удаляю указанное выше свойство данных, предупреждение исчезает.

Правильно ли я устанавливаю данные? Если да, что мне делать с предупреждением?

Должен ли я установить данные по-другому?


vue.js vue-test-utils
person Daryn    schedule 23.02.2018    source источник

Ответы (3)


arrow_upward
21
arrow_downward

Пожалуйста, попробуйте вот так:

beforeEach(() => {
  wrapper = shallow(GridContainer, {
    propsData: {
     userId,
     managerId
    }
  })
 wrapper.setData({pageSize: count})
})

ссылка: setData https://vue-test-utils.vuejs.org/en/api/wrapper/setData.html

person yukihirop    schedule 02.03.2018

arrow_upward
15
arrow_downward

Решением для меня было определить данные как функцию при инициализации:

beforeEach(() => {
  wrapper = shallow(GridContainer, {
    propsData: {
      userId,
      managerId
    },
    data: function() {
      return {
        pageSize: count
      }
    }
  })
})

В моем случае решение, предоставленное yukihirop с использованием setData(), не сработало.

Мой компонент получал доступ к данным из объекта окна, который не был определен в моей тестовой среде. Эти данные выводились в шаблоне. Это привело к возникновению исключения сразу после монтирования - до того, как я успел вызвать setData().

person Nicholas Betsworth    schedule 04.06.2019
comment
Можете подтвердить, что делаете это по-своему, означает, что компонент отображается только один раз - person ioan; 10.04.2020

arrow_upward
0
arrow_downward

Решение Николаса Бетсворта является правильным, однако также можно использовать setData с Vue.nextTick (). Vue.nextTick () повторно отрендерит компонент.

beforeEach(() => {
  wrapper = shallow(GridContainer, {
    propsData: {
     userId,
     managerId
    }
  })
 wrapper.setData({pageSize: count})
 Vue.nextTick()
})

Vue.nextTick

person mnovabox    schedule 18.05.2020