CSS.supports 未在 Jest 测试中定义

Question

我尝试了很多方法在整个互联网上寻找解决我的问题的方法，但是我找不到任何可以帮助我的东西。

我有一个允许我测试值的 JS 实用程序文件。这是组成它的功能之一：

const colorIsValid = (color) => {
  if (!color || typeof color !== 'string') {
    return false
  }

  if (CSS !== undefined) {
    if (CSS.supports('color', color)) {
      return true
    }
    throw new Error(`The provided color : "${color}" is not valid`)
  }
  throw new Error('Your navigator do not support CSS Api')
}
export { colorIsValid }

当我在不同的浏览器上进行手动测试时，一切正常。但是，当我运行使用 Jest 进行测试时，出现以下错误：

ReferenceError: CSS is not defined

这是我当前的环境。

// package.json
{
  "name": "vue-polygon-grid",
  "version": "1.0.0",
  "description": "Interactive polygon structure for Vue.js",
  "author": {
    "name": "Guyomar Alexis",
    "email": "contact@ag-dev.fr",
    "url": "https://ag-dev.fr/"
  },
  "main": "dist/data-tables.min.js",
  "homepage": "https://github.com/ga-devfront/vue-polygon-grid-private",
  "keywords": [
    "vue3",
    "vuejs",
    "vue",
    "grid",
    "polygon",
    "composition"
  ],
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "jest"
  },
  "dependencies": {
    "core-js": "^3.20.2",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@babel/preset-env": "^7.16.8",
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "@vue/compiler-sfc": "^3.2.26",
    "@vue/eslint-config-airbnb": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^27.4.6F",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jest": "^25.3.4",
    "eslint-plugin-vue": "^8.2.0",
    "jest": "27.4.7",
    "jest-junit": "13.0.0",
    "jest-transform-stub": "^2.0.0",
    "sass": "^1.38.0",
    "sass-loader": "^10"
  }
}

// jest.config.js
module.exports = {
  clearMocks: true,
  collectCoverage: true,
  coverageDirectory: 'coverage',
  "collectCoverageFrom": [
    "**/utility/*.{js,jsx}",
  ],
  coverageReporters: ['html', 'text', 'text-summary', 'cobertura'],
  transform: {
    '^.+\.js$': 'babel-jest',
    '.+\.(css|styl|less|sass|scss|png|jpg|jpeg|svg|ttf|woff|woff2)$': 'jest-transform-stub',
  },
  reporters: [
    'default',
    ['jest-junit', { outputDirectory: 'coverage' }],
  ],
};

有没有人有解决方案让我可以测试我的方法？预先感谢您花时间阅读我的文章。

Answer 1

jest 通过 Node 运行时运行，这意味着没有浏览器 API。你需要模拟它。看笑话setupFiles.

创建安装文件：

global.CSS = {
  supports: (k, v) => false,
}

然后使用该设置文件将 CSS 对象添加到全局对象上。

This answer 也可能有帮助。

Answer 2

如果您确实需要 DOM API，您可以包含可以提供帮助的包 JSDOM。在我看来，大多数情况下这是不必要的依赖。

从你的问题来看，你似乎只需要测试运行。你真的需要设置全局 CSS 对象吗？您确定您没有测试实施细节吗？

CSS.supports 未在 Jest 测试中定义

CSS.supports is not defined in Jest test

javascript

css

browser

testing

jestjs