Тестирование Vue с Jest

Вводная статья о том как начать писать тесты на Ject для приложений написанных на Vue.js

Нельзя недооценивать важность тестирования приложений Vue.js, а Jest делает это проще, чем когда-либо.

Поскольку мы находимся в среде Vue.js, мы также будем использовать vue-test-utils, чтобы упростить взаимодействие с нативными элементами Vue.

Настройка проекта

Настроить нашу среду тестирования легко. В предыдущих версиях CLI Vue.js нам приходилось делать это вручную, но теперь это входит в стандартную комплектацию проекта.

Убедитесь, что на вашем компьютере установлен CLI Vue.js, выполнив следующие действия:

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

# Ensure you have the appropriate version (3.x.x>) with
$ vue --version

Создайте новый проект с CLI со следующими опциями:

$ vue create testing-vue

> Manually select features
> Babel, Linter / Preformatter, Unit Testing
> ESLint (your preference)
> Lint on save
> Jest
> In dedicated config files

$ cd testing-vue
$ code .
$ npm run serve 

Тестирование

Теперь, когда мы сгенерировали наш проект Vue с помощью Jest, мы можем перейти к папке tests/unit. Внутри этой папки у нас есть файл с именем example.spec.js со следующим содержимым:

import { shallowMount } from "@vue/test-utils";
import HelloWorld from "@/components/HelloWorld.vue";

describe("HelloWorld.vue", () => {
  it("renders props.msg when passed", () => {
    const msg = "new message";
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    });
    expect(wrapper.text()).toMatch(msg);
  });
});

Как указано в нашем package.json, мы можем запустить этот модульный тест, набрав:

$ npm run test:unit

Эта команда запустит всех модульные тесты в рамках нашего проекта. На данный момент все проходит как положено.

Мы можем добавить к этой команде флаг —watch, чтобы она работала в фоновом режиме при создании и редактировании новых тестов.

"scripts": {
  "test:unit": "vue-cli-service test:unit --watch"
}

Модульное тестирование

Давайте в нашем небольшом примере создадим новый компонент с именем FancyHeading. Он будет представлять заголовок, который можно настроить с помощью title и color.

<template>
  <h1 :style="headingStyles">{{title}}</h1>
</template>

<script>
export default {
  data() {
    return {
      headingStyles: {
        color: this.color
      }
    };
  },
  props: ["title", "color"]
};
</script>

Чтобы выполнить модульное тестирование, нам нужно создать соответствующий файл FancyHeading.spec.js в каталоге tests/unit.

Набор тестов можно рассматривать как группу тестов, сосредоточенных вокруг определенного модуля или функциональности.

Давайте рассмотрим на наш первый модульный тест с Jest и Vue. Мы исследуем его построчно:

import Vue from 'vue';
import FancyHeading from '@/components/FancyHeading.vue';

function mountComponentWithProps (Component, propsData) {
  const Constructor = Vue.extend(Component);
  const vm = new Constructor({
    propsData
  }).$mount();

  return vm.$el;
}

describe('FancyHeading.vue', () => {
  it('should be the correct color', () => {
    const headingData = mountComponentWithProps(FancyHeading, { color: 'red' });
    const styleData = headingData.style.getPropertyValue('color');

    console.log(styleData)

    expect(styleData).toEqual('blue');
  });

  it('should have the correct title', () => {
    const headingData = mountComponentWithProps(FancyHeading, { title: 'Hello, Vue!' });
    const titleData = headingData.textContent;

    expect(titleData).toEqual('Hello, Vue!');
  });
});

• Мы начили с импорта Vue и необходимых компонентов, которые мы хотим протестировать.
• Далее используем describe для инкапсуляции многочисленных модульных тестов, окружающих компонент FancyHeading.
• Каждый модульный тест создается с помощью функции it, сначала предоставляя описание того, что мы тестируем, а затем функцию.
• В нашем первом утверждении: It must have the correct color (оно должно иметь правильный цвет), мы монтируем наш компонент в новый экземпляр Vue с помощью mountComponentWithProps.
• Затем мы создаем переменную styleData, которая содержит то, что мы ожидаем получить от нашего теста.
• Наконец, мы утверждаем, что это верно, используя expect. Если мы запустим тест в терминале с помощью команды $ npm run test: unit —watch, мы увидим PASS для этого модульного теста.

Далее мы применяем аналогичный подход при тестировании title нашего заголовка во втором модульном тесте.

Для получения дополнительной информации о тестировании с Vue.js, посмотрите руководство Karma and Mocha guide.

Оригинальная статья: Testing Vue with Jest