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

Jest
В этой статье представлены:
1. Построение jest окружения под vue-cli3
2. Основные методы тестирования компонентов vue

Конфигурация среды

Плагин vue-cli3 делает процесс установки чрезвычайно простым. Запустите систему визуального управления через vue ui. На панели плагинов нажмите «Добавить плагин», найдите @vue/cli-plugin-unit- jest и нажмите «Установить».Команда vue add @vue/cli-plugin-unit-jest в командной строке; этот процесс на самом деле включает в себя два этапа установки и вызова, а также установит соответствующие зависимости вместе, поэтому вам не нужно сделать это один за другим самостоятельно. Установите все зависимости.


После завершения установки вы найдете эти зависимости в файле package.json.


В корневом каталоге вы найдете новую тестовую папку, которая содержит образец файла с суффиксом .spec.js.Используйте команду test:unit в packgae.json, чтобы запустить его напрямую, вы можете вызвать test of jest и система сопоставит все файлы суффиксов .spec.js или .test.js и выполнит код в период, нормальный результат выглядит следующим образом.





Конфигурация среды в основном здесь.

тестовый пример vue с одним файлом

Далее я расскажу о написании самого простого тестового примера с помощью простого компонента vue.В качестве примера возьмем компонент оповещения element-ui, для компонента vue основным тестовым индикатором должен быть интерфейс props.Файл alert.vue определяет следующие несколько реквизитов:





Мой тестовый код выглядит следующим образом, а поясняющая часть написана в комментариях:

import { mount } from '@vue/test-utils' // 创建一个包含被挂载和渲染的 Vue 组件的 Wrapper

import { mount } from '@vue/test-utils' // 创建一个包含被挂载和渲染的 Vue 组件的 Wrapper

import Alert from '@/components/alert/index.vue'; // 引入组件

describe('Alert', () => { // describe 代表一个作用域
  
  it('create', () => {
    // ‘creat’ 这里只是一个自定义的描述性文字
    const wrapper = mount(Alert, {
      // 通过 mount 生成了一个包裹器，包括了一个挂载组件或 vnode，以及测试该组件或 vnode 的方法
      propsData: {
        title: 'title',
        showIcon: true
      }
      // 可以带参数，这里我通过 propsData 传递了接口数据
    })
    expect(wrapper.find('.el-alert__title').text()).toEqual('title');
    expect(wrapper.vm.visible).toBe(true);
    // .vm 可以获取当前实例对象，相当于拿到了 vue组件里的 this 对象
    // find()可以匹配各种类型的选择器，类似于选中 DOM, text() 就是获取其中的内容
    // toEqual 是一个断言，判断结果为 ‘title’ 时，通过测试，否则猜测是失败
  });

  it('type', () => {
    const wrapper = mount(Alert, {
      propsData: {
        title: 'title',
        showIcon: true,
        type: 'success'
      }
    })
    expect(wrapper.classes('el-alert--success')).toBe(true);
    // classes() 方法，返回 class 名称的数组。或在提供 class 名的时候返回一个布尔值
    // toBe 和toEqual 类似，区别在于toBe 更严格限于同一个对象，如果是基本类型则没什么区别
  });

  it('description', () => {
    const wrapper =  mount(Alert, {
      propsData: {
        title: 'Dorne',
        description: 'Unbowed, Unbent, Unbroken',
        showIcon: true
      }
    })
    expect(wrapper.find('.el-alert__description').text()).toEqual('Unbowed, Unbent, Unbroken');
  });

  it('title slot', () => {
    const wrapper = mount(Alert, {
      propsData: {
        title: 'Dorne'
      },
      slots: {
        title: '<span>foo</span>'
      }
    })
    // 这里通过slots 属性，添加了一个 slot 插槽，然后来判断插槽内容是否正确渲染进去了
    expect(wrapper.find('.el-alert__title').text()).toEqual('foo')
  });

  it('close', () => {
    const wrapper = mount(Alert, {
      propsData: {
        title: 'test'
      }
    })
    wrapper.find('.el-alert__closebtn').trigger('click')
    expect(wrapper.vm.visible).toBe(true)
    // trigger()可以触发一个事件，这里模拟了点击
  });
});

Приведенный выше тестовый пример охватывает события prop и click компонента оповещения.Это наиболее часто используемые части однофайлового тестирования vue.Выполните npm run test:unit, чтобы увидеть эффект



Индикаторы в таблице относятся к покрытию кода, которые по умолчанию отключены и должны быть настроены в jest.config.js.

  "collectCoverage": true,
  "collectCoverageFrom": ["**/*.{js,vue}", "!**/node_modules/**"]

Наборы тестов — это набор, обычно тестовый файл соответствует набору тестов, Тесты — это количество всех тестовых экземпляров, все тестовые экземпляры здесь прошли тест, поэтому он отображается как пройденный, если тест не пройден, будет неудачный вывод:



Хорошо, это простое применение jest в проекте vue, надеюсь, оно вам поможет.


Расширенный раздел Jest

Связанные документы:

рекомендуемая статья:


Категории