[Documentation][3.0.0-beta.1] Unit testing

Environment

Vuetify Version: 3.0.0-alpha.12 Vue Version: 3.2.13 Browsers: Chrome 98.0.4758.102 OS: Windows 10

Steps to reproduce

git clone https://github.com/governance-foundation/template-electron-vuex-vuetify.git cd template-electron-vuex-vuetify npm install npm run test:unit

Expected Behavior

unit test pass

Actual Behavior

 FAIL  src/components/__tests__/HelloWorld.spec.ts [ src/components/__tests__/HelloWorld.spec.ts ]
ReferenceError: CSS is not defined
 ❯ node_modules/vuetify/lib/util/globals.mjs:7:52
      5| export const SUPPORTS_INTERSECTION = IN_BROWSER && 'IntersectionObserver' in window;
      6| export const SUPPORTS_TOUCH = IN_BROWSER && ('ontouchstart' in window || window.navigator.maxTouchPoints > 0);
      7| export const SUPPORTS_FOCUS_VISIBLE = IN_BROWSER && CSS.supports('selector(:focus-visible)');
       |                                                    ^
      8| //# sourceMappingURL=globals.mjs.map
 ❯ async node_modules/vuetify/lib/util/index.mjs:19:31
 ❯ async node_modules/vuetify/lib/composables/tag.mjs:2:31
 ❯ async node_modules/vuetify/lib/components/VGrid/VContainer.mjs:7:31

Reproduction Link

https://github.com/governance-foundation/template-electron-vuex-vuetify

Other comments

I have globals set, and setup files mocking global.CSS.

[MaciejJanyska]

Why is this closed if the issue is not resolved? 🤔 Still no documentation on unit testing…

[mpont91]

I finally managed to pass the tests. The last step is add this on vite.config.js

  test: {
    setupFiles: "vuetify.config.js",
    deps: {
      inline: ["vuetify"],
    },
    globals: true,
  }

And vuetify.config.js has the css support false:

global.CSS = { supports: () => false };

I leave my repo reproducing the problem and the last commit solving it, so it can help someone. https://github.com/mpont91/vue3-vuetify-tests