Jest測試失敗：TypeError：window.matchMedia不是函數

Question

這是我的第一個前端測試體驗。在這個項目中，我使用了笑話快照測試，並在我的組件中出現了錯誤TypeError: window.matchMedia is not a function。

我通過jest文檔，發現「手動模擬」部分，但我還沒有任何想法如何做到這一點。

Answer 1

Jest使用jsdom來創建瀏覽器環境。 JSDom不支持window.matchMedia，所以你將不得不自己創建它。

Jest的manual mocks使用模塊邊界，即require/import語句，因此它們不適合模擬window.matchMedia，因爲它是全局的。

因此你有兩種選擇：

1. 定義其中出口window.matchMedia您自己的本地matchMedia模塊。 - 這將允許您然後定義一個手動模擬在您的測試中使用。

2. 定義一個setup file，它爲matchMedia添加一個模擬到全局窗口。

有了這些選項，你可以使用一個matchMedia polyfill作爲假這將至少可以讓你的測試運行，或者如果你需要模擬不同的狀態，你可能要與私有方法讓你寫你自己配置它類似於玩笑fs manual mock

Answer 2

我把matchMedia存根在我開玩笑測試文件（測試以上），這使得行爲測試通過：

window.matchMedia = window.matchMedia || function() { 
    return { 
     matches : false, 
     addListener : function() {}, 
     removeListener: function() {} 
    }; 
}; 

Answer 3

我一直在使用這種技術來

解決一堆mocki問題。

describe("Test",() => { 
    beforeAll(() => { 
    Object.defineProperty(window, "matchMedia", { 
     value: jest.fn(() => { return { matches: true } }) 
    }); 
    }); 
}); 

，或者如果你想嘲笑這一切的時候，你可以把你的mocks文件從名爲裏面你package.json： "setupTestFrameworkScriptFile": "<rootDir>/src/tests/mocks.js",

裁判：setupTestFrameworkScriptFile