reactjsvitereact-typescriptvitestant-design-pro

SyntaxError when migrating to vitest from jest

I am migrating a React application from craco/Jest to Vite/Vitest The application also used AntDesign and before the test was running flawlessy. React version is 18.20 . NB we are trying to also mock some objects

I get this error when running the tests:

Error: Uncaught [SyntaxError: ':scope +.ant-select-item-option-selected:not(.ant-select-item-option-disabled))+.ant-select-item-option-selected:not(.ant-select-item-option-disabled' is not a valid selector]
    at reportException (/auto/local_build/dhws140/disk1/FLOW/flow-prototype/nconect.flow.b2c.app/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
    at innerInvokeEventListeners (/auto/local_build/dhws140/disk1/FLOW/flow-prototype/nconect.flow.b2c.app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:353:9)
    at invokeEventListeners (/auto/local_build/dhws140/disk1/FLOW/flow-prototype/nconect.flow.b2c.app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
    at HTMLUnknownElementImpl._dispatch (/auto/local_build/dhws140/disk1/FLOW/flow-prototype/nconect.flow.b2c.app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
    at HTMLUnknownElementImpl.dispatchEvent (/auto/local_build/dhws140/disk1/FLOW/flow-prototype/nconect.flow.b2c.app/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
    at HTMLUnknownElement.dispatchEvent (/auto/local_build/dhws140/disk1/FLOW/flow-prototype/nconect.flow.b2c.app/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
    at Object.invokeGuardedCallbackDev (/auto/local_build/dhws140/disk1/FLOW/flow-prototype/nconect.flow.b2c.app/node_modules/react-dom/cjs/react-dom.development.js:4213:16)
    at invokeGuardedCallback (/auto/local_build/dhws140/disk1/FLOW/flow-prototype/nconect.flow.b2c.app/node_modules/react-dom/cjs/react-dom.development.js:4277:31)
    at reportUncaughtErrorInDEV (/auto/local_build/dhws140/disk1/FLOW/flow-prototype/nconect.flow.b2c.app/node_modules/react-dom/cjs/react-dom.development.js:22877:5)
    at captureCommitPhaseError (/auto/local_build/dhws140/disk1/FLOW/flow-prototype/nconect.flow.b2c.app/node_modules/react-dom/cjs/react-dom.development.js:27165:5) DOMException {}

this is my vute.config.ts

/// <reference types="vitest" />
import { defineConfig, transformWithEsbuild } from 'vite'
import 'vitest/config'
import react from '@vitejs/plugin-react'
import viteTsconfigPaths from 'vite-tsconfig-paths'
import svgr from 'vite-plugin-svgr'
import checker from 'vite-plugin-checker'
import commonjs from 'vite-plugin-commonjs'

export default defineConfig({
    build: {
      rollupOptions: {
        external: ['react', /^react\/.*/, 'react-dom', /react-dom\/.*/],
      }
    },
  css: {
    preprocessorOptions: {
      less: {
        additionalData: '@root-entry-name: default;',
        javascriptEnabled: true,
      },
    },
  },
  plugins: [
    {
      name: 'treat-js-files-as-jsx',
      async transform (code, id) {
        if (!id.match(/src\/.*\.js$/)) return null

        // Use the exposed transform from vite, instead of directly
        // transforming with esbuild
        return transformWithEsbuild(code, id, {
          jsx: 'automatic',
          loader: 'jsx',
        })
      },
    },
    commonjs(),
    react(),
    viteTsconfigPaths(),
    svgr({ svgrOptions: { typescript: true } }),
    checker({ typescript: true })],
  test: {
    coverage: {
      exclude: [],
      include: ['src/**/*'],
      reporter: ['text', 'json', 'html'],
    },
    css: true,
    environment: 'jsdom',
    globals: true,
    reporters: ['verbose'],
    setupFiles: './src/setupTests.ts',
  }
  }
)
Solution

  • This is a 'bug' with the css selector library nwsapi that is used by jsdom, see:

    The solution is to pin that library to the version 2.2.13.

    Add to your package.json:

    {
   ...
   "devDependencies": {
       ...
       "nwsapi": "2.2.13"
   },
   // for npm
   "overrides": {
       "nwsapi": "2.2.13"
   },
   // for yarn
   "resolutions": {
       "nwsapi": "2.2.13"
    }
}