Как тестировать страницу в Vue js?

Question

[postya]

Имеется вебсайт на Vue Js. Подключен vue-router для преехода по страницам. Мне необходимо протестировать, если например я нахожусь на localhost:8080, то показать страницу Home, и чтобы она корректно отобразилась. На данном этапе я пока не использовал копоненты, а всё,что находится в приложении находится во views. То есть я использую страницы, а не копоненты.
Во всех туториалах по тому же Jest тестируют именно компоненты, а мне же пока нужно протестировать view.

Можете написать простой пример тестирования одной страницы?

Структура проекта:



App.vue:

<template>
  <div id="app">
    <div class="container">
      <div id="nav">
        <div class="nav-logo">
          <router-link to="/">
            <img src="./assets/images/logo.png" alt="logo" />
          </router-link>
        </div>

        <div class="nav-links">
          <router-link to="/">Home</router-link>
          <a href="#" target="_blank">
            <span>Get Library</span>
            <font-awesome-icon :icon="['fab', 'github']" class="git-icon" />
          </a>
          <router-link to="/examples">Sketch Examples</router-link>
          <router-link to="/tutorials">Video Tutorials</router-link>
        </div>
      </div>
    </div>

    <router-view />
  </div>
</template>

Answer 1

[Илья]

Вы используется однофайловые компоненты, так что не вьюхи используете (которых по сути нет), а именно компоненты: https://ru.vuejs.org/v2/guide/single-file-componen...

Answer 2

[Alex]

https://ru.vuejs.org/v2/guide/unit-testing.html — Модульные тексты. С примерами для отдельных компонентов. Ваши всьюхи — по своей сути те же компоненты.
Если вам нужно протестировать "всю страницу" — тогда ищите инструменты и примеры для e2e тестирования