假設我有組件在被調用時被渲染然后安裝到 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 是否更改)謝謝!
在 Jest 和純 JavaScript 中針對 DOM 進行測試
一只萌萌小番薯
2022-10-08 17:10:03