Тестирование является важным этапом разработки приложений на Vue.js 3, поскольку оно обеспечивает проверку правильности работы кода и выявление ошибок. В этой статье мы рассмотрим, как тестировать Vue.js-приложения в Vue.js 3, используя инструменты, такие как Vue Test Utils и Jest, а также предложим примеры кода для различных типов тестов.
Установка инструментов тестирования: Для начала установите необходимые инструменты, выполнив следующие команды:
npm install --save-dev @vue/test-utils
npm install --save-dev jest
npm install --save-dev vue-jest
npm install --save-dev babel-jestСоздайте файл конфигурации Jest jest.config.js в корне вашего проекта:
module.exports = {
preset: '@vue/cli-plugin-unit-jest',
transform: {
'^.+\\.vue$': 'vue-jest',
},
};Тестирование компонентов: Для тестирования компонентов Vue.js мы будем использовать библиотеку Vue Test Utils. Ниже приведен пример кода для тестирования простого компонента:
// src/components/Counter.vue
<template>
<div>
<button @click="increment">+</button>
<p>{{ count }}</p>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
methods: {
increment() {
this.count++;
},
},
};
</script>Создайте файл теста Counter.spec.js:
import { shallowMount } from '@vue/test-utils';
import Counter from '@/components/Counter.vue';
describe('Counter.vue', () => {
it('increments count when button is clicked', async () => {
const wrapper = shallowMount(Counter);
const button = wrapper.find('button');
await button.trigger('click');
expect(wrapper.find('p').text()).toBe('1');
});
});Запустите тест, выполнив команду npm run test:unit.
Тестирование пользовательских событий: Vue Test Utils также позволяет тестировать пользовательские события. Рассмотрим пример компонента с пользовательским событием:
// src/components/SubmitButton.vue
<template>
<button @click="$emit('submit')">Submit</button>
</template>
<script>
export default {
name: 'SubmitButton',
};
</script>Создайте файл теста SubmitButton.spec.js:
import { shallowMount } from '@vue/test-utils';
import SubmitButton from '@/components/SubmitButton.vue';
describe('SubmitButton.vue', () => {
it('emits a submit event when clicked', async () => {
const wrapper = shallowMount(SubmitButton);
await wrapper.find('button').trigger('click');
expect(wrapper.emitted('submit')).toBeTruthy();
});
});Запустите тест, выполнив команду `npm run test:unit`.
Тестирование Vuex:
Для тестирования Vuex-модулей можно использовать Jest. Рассмотрим пример тестирования простого модуля Vuex:
// src/store/modules/counter.js
export default {
state: {
count: 0,
},
mutations: {
increment(state) {
state.count++;
},
},
actions: {
increment({ commit }) {
commit('increment');
},
},
};Создайте файл теста counter.spec.js:
import counterModule from '@/store/modules/counter';
describe('counter.js', () => {
it('increments count in state', () => {
const state = {
count: 0,
};
counterModule.mutations.increment(state);
expect(state.count).toBe(1);
});
it('commits increment mutation', () => {
const commit = jest.fn();
counterModule.actions.increment({ commit });
expect(commit).toHaveBeenCalledWith('increment');
});
});
Запустите тест, выполнив команду npm run test:unit.
Заключение: Тестирование является важным инструментом для обеспечения качества кода и стабильности приложений на Vue.js 3. Мы рассмотрели, как использовать Vue Test Utils и Jest для тестирования компонентов, пользовательских событий и Vuex-модулей. Эти примеры кода помогут вам начать тестирование своих приложений на Vue.js 3 и улучшить их надежность.