无法使用Jest在我的React应用程序中集成测试

Question

我正在尝试为React + Jest测试设置react应用，但在
yarn test上出现错误

我的package.json是

{
  "scripts": {
    "start": "webpack-dev-server --hot --open",
    "build": "webpack --config ./webpack.production.config.js --progress --profile --colors",
    "precommit": "lint-staged",
    "format": "prettier --fix --write \"app/**/*.{js,jsx,json,css,scss}\"",
    "test": "jest"
  },
  "jest": {
    "moduleNameMapper": {
      "^config$": "<rootDir>/jest.config.js"
    }
  },
  "license": "MIT",
  "dependencies": {
    "@types/react": "^16.3.16",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-polyfill": "^6.26.0",
    "react": "^16.3.2",
    "react-slick": "^0.24.0",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-jest": "^23.6.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-polyfill": "^6.16.0",
    "husky": "^0.14.3",
    "jest": "^23.4.2",
    "jest-cli": "^23.6.0",
    "jest-enzyme": "^7.0.2",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.1.2",
    "webpack-dev-server": "^3.1.1"
  }
}

还有我的setupTests.js。我在github上找到了

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

我有jest.config.js

module.exports = {
  moduleFileExtensions: ['js', 'jsx', 'json'],
  transform: {
    '^.+\\.(js|jsx)?$': 'babel-jest',
  },
  transformIgnorePatterns: ['<rootDir>/node_modules/'],
};

任何想法如何解决该问题？我搜了很多，但什么也没找到。

Answer 1

在setupTests.js中放入

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

停止所有任务，然后运行npm test。现在应该工作。

link