webpack - 使用 Chai 测试：添加 react-slick 会引发错误 - matchMedia 不存在

Question

将 react-slick 滑块添加到我的 webpack 项目后，我的 chai 测试开始失败

C:\project\proj\js\node_modules\enquire.js\dist\enquire.js:226
            throw new Error('matchMedia not present, legacy browsers require a polyfill');
            ^

Error: matchMedia not present, legacy browsers require a polyfill
    at Object.MediaQueryDispatch (C:\project\proj\js\node_modules\enquire.js\dist\enquire.js:226:19)
    at C:\project\proj\js\node_modules\enquire.js\dist\enquire.js:291:9
    at i (C:\project\proj\js\node_modules\enquire.js\dist\enquire.js:11:20)
    at Object.<anonymous> (C:\project\proj\js\node_modules\enquire.js\dist\enquire.js:21:2)

此处推荐的滑块组件的作者对此问题的唯一修复是开玩笑。我已经在我的环境中尝试过，但它没有用。

Answer 1

我用摩卡咖啡。

我添加了它dom.js

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

所以我可以使用这个命令来调用它。

mocha --compilers js:babel-register --require dom.js --recursive

Answer 2

解决方案应该基于您的测试运行器，一般您必须模拟window.matchMedia

window.matchMedia = () => ({
  matches : false,
  addListener : () =>{},
  removeListener: () =>{},
});

或者

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

如果您将有类似窗口未定义的内容，您可以尝试将其附加到测试运行程序使用的全局对象。

希望这会有所帮助，祝你好运