亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 Jest 和純 JavaScript 中針對 DOM 進行測試

在 Jest 和純 JavaScript 中針對 DOM 進行測試

一只萌萌小番薯 2022-10-08 17:10:03
假設我有組件在被調用時被渲染然后安裝到 DOM 節點render()上:render() {  // Render the HTML elements  const content = renderParent();  // Mount onto the DOM element with id `app`;  let element = document.getElementById('app');  element.innerHTML = '';  element.appendChild(div);}renderParent() {  const div = document.createElement('div');  div.classList.add('foo', 'bar');  div.innerHTML = renderChild();  return div}renderChild() {  const span = document.createElement('span');  span.innerText = 'ayyy lmao';  return span;}export { render }(上面過于簡單化了。實際上,嵌套的子組件層分布在多個文件中,并且元素更復雜)我是使用 Jest 和 JavaScript 的新手,我想用 Jest 編寫一些測試。我可以輕松地測試renderParent()和renderChild()因為它們返回 HTMLElement 對象的行為,并且我可以對各種屬性進行斷言。但是如何測試頂級render()方法的行為呢?這不會返回任何內容,而是將其內容呈現到 DOM 中。Jest 是否支持定義要測試的 DOM?我將如何處理對 DOM 的更新(例如,在單擊事件后測試 DOM 是否更改)謝謝!
查看完整描述

1 回答

?
DIEA

TA貢獻1820條經驗 獲得超2個贊

Jest 是否支持定義要測試的 DOM?

是的,它確實!實際上,Jest 已經捆綁了一個名為jsdom的 DOM 實現。

我將如何處理對 DOM 的更新

盡管不是所有的 DOM API 都在 jsdom 中實現,但是根據您的用例,您應該能夠像在瀏覽器控制臺中一樣檢查 DOM 樹。

因此,使用 Jest 的開箱即用產品,您可以創建 DOM 元素、斷言它們的狀態、運行更新,然后重新斷言 DOM 狀態已更改。


查看完整回答
反對 回復 2022-10-08
  • 1 回答
  • 0 關注
  • 281 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號