Vue.js модульное тестирование ErrorBoundary - PullRequest
Новая
       19

Vue.js модульное тестирование ErrorBoundary

0 голосов
/ 25 ноября 2018

Я создал простой компонент ErrorBoundary для своего проекта в Vue.js, и я пытаюсь написать для него модульный тест.Код компонента ниже: 

<template>
  <div class="overvue-error-boundary">
    <slot v-if="!error" />
    <div class="error-message" v-else>Something went horribly wrong here.</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      error: false
    }
  },
  errorCaptured (error, vm, info) {
    this.error = true;
  }
}
</script>

Я создал ErrorThrowingComponent, который выдает ошибку на made () ловушке жизненного цикла, чтобы я мог проверить ErrorBoundary: 

const ErrorThrowingComponent = Vue.component('error-throwing-component', {
  created() {
    throw new Error(`Generic error`);
  },
  render (h) {
    return h('div', 'lorem ipsum')
  }
});

describe('when component in slot throws an error', () => {
  it('renders div.error-message', () => {
  // this is when error is when 'Generic error' is thrown by ErrorThrowingComponent
  const wrapper = shallowMount(OvervueErrorBoundary, {
    slots: {
      default: ErrorThrowingComponent
    }});
    // below code is not executed
    expect(wrapper.contains(ErrorThrowingComponent)).to.be.false;
    expect(wrapper.contains('div.error-message')).to.be.true;
  });
});

Проблема в том, что ErrorThrowingComponent выдает ошибку, когда я пытаюсь его смонтировать (таким образом, проваливая весь тест).Можно ли как-нибудь предотвратить это?

РЕДАКТИРОВАТЬ: я пытаюсь добиться на самом деле mount компонента ErrorThrowing в слоте по умолчанию ErrorBoundary компонент для подтверждения, если ErrorBoundary будет отображать сообщение об ошибке, а не слот.Именно так я и создал ErrorThrowingComponent.Но я не могу утверждать поведение ErrorBoundary, потому что я получаю ошибку при попытке создать оболочку.

1 Ответ

0 голосов
/ 25 ноября 2018

Для тех, кто приходит сюда с подобной проблемой: я поднял это на канале Vue Land # vue-testing на Discord, и они предложили перенести всю логику обработки ошибок в функцию, которая будет вызываться из errorCaptured ()подключи, а потом просто проверь эту функцию.Этот подход кажется мне разумным, поэтому я решил опубликовать его здесь.

Рефакторирован ErrorBoundary компонент: 

<template>
  <div class="error-boundary">
    <slot v-if="!error" />
    <div class="error-message" v-else>Something went horribly wrong here. Error: {{ error.message }}</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      error: null
    }
  },
  methods: {
    interceptError(error) {
      this.error = error;
    }
  },
  errorCaptured (error, vm, info) {
    this.interceptError(error);
  }
}
</script>

Модульное тестирование с использованием vue-test-utils: 

describe('when interceptError method is called', () => {
  it('renders div.error-message', () => {
    const wrapper = shallowMount(OvervueErrorBoundary);
    wrapper.vm.interceptError(new Error('Generic error'));
    expect(wrapper.contains('div.error-message')).to.be.true;
  });
});
...