有沒有在測試React組件之前模擬DOM的方法？

Question

我試圖測試我的React類（使用TestUtils，酶和Jest），但由於我們不得不忍受一些變通方法，它依賴於服務器呈現的HTML頁面中的元素 - 即，它在渲染之前從componentDidMount中的DOM中捕獲某些元素。例如：

componentDidMount() { 
    document.documentElement.classList.add('example'); 
    this.someOtherFunction(document.getElementsByClassName('my-great-className')) 
} 

我想測試這個組件，但當然在componentDidMount功能失敗，因爲服務器提供的HTML頁面沒有在測試中存在。有沒有辦法在渲染React組件之前模擬特定的DOM？

Answer 1

您可以只設置的東西，你開始你的測試

global.document = { 
    documentElement: { 
    classList: { 
     add: jest.fn() 
    } 
    } 
    getElementsByClassName: jest.fn({id:'id'}) 
} 

之前在您的測試，那麼你可以只檢查add被稱爲與example和someOtherFunction被稱爲與{id:'id'}。由於所有測試文件都在其自己的沙箱中運行，因此完全可以安全地設置文檔模擬。