單元測試 describe & it

Unit Test官網
Unit Test官網
unit test VUE 3 Composition API methods?

元件測試的目標

data

props

slot

provide

directive

Event（瀏覽器中的互動行為）

API response（模擬回應）

元件測試：針對 Vue 元件所進行的測試

單元測試：針對元件引入函式、類別等 utils、helper 與 composable 的測試。

工具本身：Pinia 測試、Vue Router 測試。

容器(Wrapper)

方法 mount
import HelloWorld from ‘../HelloWorld.vue’
const wrapper = mount(HelloWorld, { props: { msg: ‘Hello Vitest’ } })
expect(1 + 1).toBe(2)
expect(wrapper.text()).toContain(‘Hello Vitest’)

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'

describe('HelloWorld', () =>
{
    //1+1 應該是2
    it('1 + 1 should be 2', () => {
        expect(1 + 1).toBe(2)
    })
    //正確渲染
    it('正確渲染', () => {
        const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
        expect(wrapper.text()).toContain('Hello Vitest')
    })
    //在此測試檔案中使用 jsdom
    it('在此測試檔案中使用 jsdom', () => {
        const element = document.createElement('div')
        element.innerHTML = '<p>Hello, HTML!</p>'
        expect(element.innerHTML).toBe('<p>Hello, HTML!</p>')
    })
})

Nav

檢查元件的可見

檢查元件的可見

import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import Nav from '../Nav.vue'

describe('Nav.vue gets the following array from the parent element frontLayout.vue', () =>
{ 
    const navLists = [
        { id_set: '001', title: '出勤打卡', href: '/' },
        { id_set: '002', title: '出勤設定', href: '/set_check' },
        { id_set: '003', title: '出勤列表', href: '/work_check_lists' },
        { id_set:'004',  title:'出勤行事曆', href:'/work_calendar'}
    ]
    const pageNameActive = '001';
    const wrapper = mount(Nav, {
        props: {
            navLists: navLists,
            pageNameActive:pageNameActive
        }
    })
    
    it('Is navLists data correctly rendering information? ', () => {
        const items = wrapper.findAll('li');
        expect(items.length).toBe(4);
        expect(items[0].text()).toBe('出勤打卡');
        expect(items[1].text()).toBe('出勤設定');
        expect(items[2].text()).toBe('出勤列表');
        expect(items[3].text()).toBe('出勤行事曆');
      
    });
    it('pageNameActive is rendered when the initial value is passed', () => { 
         expect(pageNameActive).toMatch(pageNameActive);
    })

    it('Emits the event of the current data when clicked',  () =>
    { 
         const items = wrapper.findAll('li');
        const button = wrapper.find('li');
        button.trigger('click');
        expect(pageNameActive).toMatch(items[0].id_set);
        expect(pageNameActive).toMatch(items[1].id_set)
        expect(pageNameActive).toMatch(items[2].id_set)
        expect(pageNameActive).toMatch(items[3].id_set)
        expect(button.find('li.isActive'));
    })
    //emitted ,toHaveProperty 點擊時取出當筆數據的事件
    it('Event to retrieve the current data when clicked', async () =>
    {
        await wrapper.get('[data-test="button"]').trigger('click')
        expect(wrapper.emitted()).toHaveProperty('sendMenuClickActive')
    })
})

form