CSS.supports is not defined in Jest test

Question

I tried a lot to search for a solution to my problem all over the internet, however I couldn't find anything that could help me.

I have a JS utility file that allows me to test values. Here is one of the functions that compose it :

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 }

Everything works fine when I do a manual test on different browsers. However when I run my tests with Jest I get the following error:

ReferenceError: CSS is not defined

here is my current environment.

// 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' }],
  ],
};

Does anyone have a solution so I can test my methods? Thank you in advance for taking the time to read me.

score 3 · Accepted Answer · answered Jan 20 '22 at 11:04

3

jest runs via Node runtime, meaning there are no browser APIs. You will need to mock it. Look into jest setupFiles.

Create a setup file:

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

Then use that setup file to add CSS object onto global object.

This answer might also be helpful.

answered Jan 20 '22 at 11:04

user3056783

2,265
1
29
55

Thank you for your answer. Do you know if any package allow user to use browser API in jest ? – ag-dev Jan 20 '22 at 19:14
Think twice if you really need it. It’s perfectly OK to stub global object if you’re not testing code reliant on DOM APIs. Even if you do you can use jest spies to set up your mock window and return any values. That’s what I would do because jest provides it out of the box – user3056783 Jan 20 '22 at 19:20

score 0 · Answer 2 · answered Jan 20 '22 at 19:23

If you really must have DOM APIs you can include package JSDOM that can help. In my opinion in most cases it’s unnecessary dependency.

From your question it sounds like you just need your tests to run. Do you really need to set up global CSS object? Are you sure you’re not testing implementation details?

CSS.supports is not defined in Jest test

2 Answers2