I am currently diving into the world of unit testing in Vue.js with Jest. One question that keeps popping up is when to use describe and when to use test ?
TodoApp.vue Component :
<template>
<div>
<h1>TodoApp Componenent</h1>
<div v-for="todo in todos" :key="todo.id" data-test="todo">
{{ todo.text }}
</div>
</div>
</template>
<script>
export default {
name: "TodoApp",
data() {
return {
todos: [
{
id: 1,
text: 'Learn Vue.js 3',
completed: false
}
]
}
}
};
</script>
<style scoped>
</style>
TodoApp.spec.js
1# Test scenario using test
import { mount } from '@vue/test-utils'
import TodoApp from '@/components/TodoApp'
test('renders a todo', () => {
const wrapper = mount(TodoApp)
const todo = wrapper.get('[data-test="todo"]')
expect(todo.text()).toBe('Learn Vue.js 2')
})
2# Test scenario using describe
import { mount } from '@vue/test-utils'
import TodoApp from '@/components/TodoApp'
describe('TodoApp', () => {
it('renders a todo', () => {
const wrapper = mount(TodoApp)
const todo = wrapper.get('[data-test="todo"]')
expect(todo.text()).toBe('Learn Vue.js 2')
})
})