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": "[email protected]",
    "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.

CodePudding user response：

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.

CodePudding user response：

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?