Vue 關於單元測試 - javascript

Question

我看到了許多測試真實 DOM 元素的單元測試示例。

前任：

expect(vm.$el.querySelector('div').textContent).toBe('xxx')

檢查 DOM 元素的文本的目的是什么？

有人說你可以測試計算值，但不是使用nextTick測試計算值嗎？

另外，人們說 HTML 標簽會影響元素的文本：

<htmlTag><a><p>{{user.name}}</p></a></htmlTag>

如果產品有多種語言怎么辦？

我相信我們應該測試應該在 HTML 模板中正確顯示的數據、狀態、函數和元素。

你們都在用 Vue 的單元測試做什么？

Answer 1

您提出不同的問題，但我將嘗試回答有關 DOM 中單元測試的“一般”問題。

由於不同的原因，DOM 元素中的單元測試可能很有用，但最重要的通常是這些：

• 測試簡單的用戶操作

  簡單用戶操作示例：

  單擊切換 DOM 元素可見性的鏈接 提交觸發表單驗證的表單 (...) 這些操作可以通過模擬 DOM 事件輕松測試

• 分析網絡特征

  操縱 JavaScript 以確定瀏覽器內的各種網絡特征。 這里有一個例子

• 測試 DOM 突變和操作

  這里解釋了一個很好的例子

正如您所說，最好直接測試狀態/變量/方法，但有時唯一的方法是使用真實或虛擬 DOM。

要了解更多信息，您可以Unit Testing in JavaScript此處查看GitHub 上的Unit Testing in JavaScript （很棒的）指南

希望它澄清並幫助你！