SyntaxError when migrating to vitest from jest

Question

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',
  }
  }
)

Arturo Volpe · Accepted Answer · 2025-01-30 22:55:31Z

1

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"
    }
}

answered Jan 30 at 22:55

Arturo Volpe

3,6873 gold badges30 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

SyntaxError when migrating to vitest from jest

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related