Vue,Vue Cli,VueCli Unit Test

Vite Vue 單元測試text()& html()內容物

describe:是用來將一至多組有相關的測試組合在一起的區塊。

text()& html()內容物

mount:掛載。
data-test:在html綁定。
find():使用 Document.querySelector() 的語法，find() 沒有找到目標元素時不會拋出錯誤。
text()text內容物。
html()html內容物。

案例 text()& html()內容物 單元測試

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//html
<template>
<div data-test="content">
    Root
    <childComponent :title="title"/>
    <childComponent :title="title"/>
</div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
import childComponent from './Test.vue'
const title =ref<string>('這是測試')
</script>
單元測試
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//引入描述、它、期望
import { describe, it } from 'vitest'
//引入測試實用程式
import { mount } from '@vue/test-utils'
//引入元件
import Content from '../Content.vue'

describe('Content', () =>
{
    if (typeof document !== 'undefined') {
        const wrapper = mount(Content)
    }
    it('正確渲染text', () =>{
        if (typeof document !== 'undefined') {
            wrapper.find('[data-test="content"]').text()
            console.log(wrapper.find('[data-test="content"]').text())
        }
    })
    it('正確渲染Html', () =>{
        if (typeof document !== 'undefined') {
            wrapper.find('[data-test="content"]').html()
            console.log(wrapper.find('[data-test="content"]').html())
        }
    })
})


Vue 單元測試attributes 判斷屬性