Почему мой модульный тест не может вернуть текст в однофайловом компоненте, где я установил этот текст с $ el.innerText на смонтированном хуке? - PullRequest
Новая
       41

Почему мой модульный тест не может вернуть текст в однофайловом компоненте, где я установил этот текст с $ el.innerText на смонтированном хуке?

0 голосов
/ 02 февраля 2019

Краткое описание проблемы

У меня есть редактируемое содержимое div, которое получает свойство content, значением по умолчанию которого является пустая строка. Вместо использования синтаксиса усов для визуализации свойства {{ content }}, я устанавливаю элементы innerText через смонтированный хук:

mounted() {this.$el.innerText = this.content}

Я создал юнитtest для проверки того, что текст компонента содержит свойство mocked, которое я передал в тест.

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

Вещи, которые я пробовал

Если я регистрирую wrapper.vm.$el.innerText Я вижу строку, которую я высмеиваю.

Если я использую синтаксис усов (а неустановленный метод), т. е. <div>}{{ content}}</div>, тест проходит.

Vue однофайловый компонент 

<template>
  <div
    contenteditable="true"/>
</template>

<script>
  export default {
    props: {
      content: {
        default: '',
        type: String,
      },
    },
    mounted() {
      this.$el.innerText = this.content;
    },
  }
</script>

Юнит-тест 

describe('BaseEditable.vue', () => {
  it('renders content property', () => {
    const wrapper = shallowMount(BaseEditable, {
      propsData: {
        content: 'some random string',
      },
    });
    expect(wrapper.text()).toContain('some random string');
});

То, что я ожидаю, и то, что я получил

Я ожидаю, что тест пройден.

Тем не менее, результат, который я получаю: 

expect(string).toContain(value)

Expected string:
  ""

To contain value:
  "some random string"

1 Ответ

0 голосов
/ 02 февраля 2019

Я понятия не имею, почему это происходит, но я смог воспроизвести вашу ошибку и "исправить" ее, используя 

  this.$el.innerHTML = this.content;

вместо 

  this.$el.innerText = this.content;

РЕДАКТИРОВАТЬ:

Я не совсем уверен в этом, но vue-test-utils использует jest с jsdom по по умолчанию , и согласно этой проблеме,они еще не реализовали innerText.

...