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

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

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

來源

2016-10-03 TIJ

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

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

因此你有兩種選擇：

定義其中出口window.matchMedia您自己的本地matchMedia模塊。 - 這將允許您然後定義一個手動模擬在您的測試中使用。
定義一個setup file，它爲matchMedia添加一個模擬到全局窗口。

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

來源

2016-10-04 15:50:41 riscarrott

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

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

來源

2017-01-12 17:21:58

，並在測試文件，裏面我寫： 'global.window.matchMedia = jest.fn（（）=> {return {matches：false，addListener：jest.fn（），removeListener：jest.fn（）}} ）' – nschwan94

如何導入存根文件？ –

我一直在使用這種技術來

解決一堆mocki問題。

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

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

裁判：setupTestFrameworkScriptFile

來源

2017-03-09 03:07:58

你在哪裏添加此代碼？如果我將它添加到測試文件的頂部，那麼它仍然無法找到matchMedia。 –

@HolgerEdwardWardlowSindbæk爲了更加清晰，我編輯了我的答案！ –

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

回答

相關問題