logo标签列表

当测试包含react-slick的create-react-app组件时，matchMedia不存在？

reactjsjestjscreate-react-app
23

我试图为已有的项目创建测试文件，该项目是使用https://github.com/facebookincubator/create-react-app构建的。

但是当我运行npm test a时，我遇到了这个错误。

FAIL  src/__tests__/movie_single/MovieSingle-test.js
  ● Test suite failed to run

    matchMedia not present, legacy browsers require a polyfill

      at Object.MediaQueryDispatch (node_modules/enquire.js/dist/enquire.js:226:19)
      at node_modules/enquire.js/dist/enquire.js:291:9
      at Object.<anonymous>.i (node_modules/enquire.js/dist/enquire.js:11:20)
      at Object.<anonymous> (node_modules/enquire.js/dist/enquire.js:21:2)
      at Object.<anonymous> (node_modules/react-responsive-mixin/index.js:2:28)
      at Object.<anonymous> (node_modules/react-slick/lib/slider.js:19:29)
      at Object.<anonymous> (node_modules/react-slick/lib/index.js:3:18)
      at Object.<anonymous> (src/components/movie_single/MovieDetailsBox.js:4:45)
      at Object.<anonymous> (src/components/movie_single/MovieSingle.js:3:50)
      at Object.<anonymous> (src/__tests__/movie_single/MovieSingle-test.js:3:46)
      at process._tickCallback (internal/process/next_tick.js:103:7)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.642s
Ran all test suites matching "a".

所以这是我的package.json

{
  "name": "xxx",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "autoprefixer-stylus": "0.10.0",
    "concurrently": "3.0.0",
    "react-scripts": "0.6.1",
    "stylus": "0.54.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "watch": "concurrently --names 'webpack, stylus' --prefix name 'npm run start' 'npm run styles:watch'",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
  }
}

这是我的MovieSingle-test.js文件。

import React from 'react';
import ReactDOM from 'react-dom';
import MoviesSingle from '../../components/movie_single/MovieSingle';

it('renders without crashing', () => {
    const div = document.createElement('div');
    ReactDOM.render(<MoviesSingle />, div);
});

那么我该如何修复这个问题并至少使常见的React组件测试通过?

谢谢！

8个回答
33
在你的项目中添加 src/setupTests.js（将在运行测试之前执行）：
/**
 * fix: `matchMedia` not present, legacy browsers require a polyfill
 */
global.matchMedia = global.matchMedia || function() {
  return {
      matches : false,
      addListener : function() {},
      removeListener: function() {}
  }
}
这是Ionic 5开箱即用的唯一解决方案。 - Erdal G.
6
我刚刚也遇到了这个问题，以下是帮助我的方法：
从这里获取test-setup.js文件并将其放置在src目录中。
window.matchMedia = window.matchMedia || function() {
    return {
        matches : false,
        addListener : function() {},
        removeListener: function() {}
    };
};

请将以下内容添加到package.json中：
"jest": {
    "setupFiles": ["<rootDir>\\src\\test-setup.js", "<rootDir>\\config\\polyfills.js"]
  },

看看这是否有帮助。
"jest": { "<rootDir>\src\test-setup.js", "<rootDir>\config\polyfills.js" } 不是有效的 JSON 格式。 - Nemanja Milosavljevic
请使用以下方式进行设置，同时应首先使用pollyfills："setupFiles": ["<rootDir>\config\polyfills.js", "<rootDir>/config/testSetup.js"] - Anupam Maurya
5
将这段代码添加进去：
window.matchMedia =
    window.matchMedia ||
    function() {
        return {
            matches: false,
            addListener: function() {},
            removeListener: function() {}
        };
    };

在 jest.setup.js 或 setupTests.js 中（您可以从 jest.config.js 中检查名称 例如，setupFiles：["./jest.setup.js"]）
2

如果这是一个已存在的项目，您需要使用以下命令安装一个名为polyfill的开发依赖包：

npm i polyfill --save-dev

这是该软件包的链接：

https://www.npmjs.com/package/polyfill

安装完成后，如果有setupTests.js文件，请将其粘贴到src文件夹中。否则，请在其中设置它。

/**
 * fix: `matchMedia` not present, legacy browsers require a polyfill
 */
var polyfill = require("polyfill");

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

它对我有效。

这对我起作用，在一个新的TS CRA应用程序中，没有填充，并使用Chakra UI。 - Matt Swezey
1
如果你正在使用 GatsbyJS，将 @maow 的代码放入您的根目录中的 loadershim.js 文件中。
1
这是我成功实现它的方法：

// fix: `matchMedia` not present, legacy browsers require a polyfill
global.window.matchMedia = (query) => ({
  matches: false,
  media: query,
  onchange: null,
  addListener: () => {}, // deprecated
  removeListener: () => {}, // deprecated
  addEventListener: () => {},
  removeEventListener: () => {},
  dispatchEvent: () => {},
})
1
我按照以下步骤解决了我的问题：
  • 创建了一个名为setupTests.js的文件
  • 将其放置在src文件夹内，即src/setupTests.js
  • 将以下代码放置在setupTests.js中：
window.matchMedia = window.matchMedia || function() {
    return {
        matches: false,
        addListener: function() {},
        removeListener: function() {}
    };
};

注意：再次运行npm test，它将解决问题（停止监视任务并重新启动它）。

0

从错误信息中获取线索：

matchMedia未找到，旧版浏览器需要使用polyfill

这意味着在测试时某些功能不可用，需要以某种方式实现才能执行操作。

为matchMedia查找适当的polyfill代码，例如this polyfill。

然后在src文件夹中创建一个名为setupTests.js的新文件，并将polyfill代码粘贴到该文件中。React脚本会在运行测试之前执行此文件。

现在再次运行测试。问题已解决。其他人也遇到了同样的问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接