TypeError: Cannot read properties of undefined (reading 'prototype')

[bas00445]

Is there anyone facing this problem when run vitest run ?

I'm using vitest with testing-library/react, Thank you

These are my dependencies:

"@testing-library/jest-dom": "5.16.5",
"@testing-library/react": "14.0.0",
"@testing-library/user-event": "14.4.3",
"vitest-canvas-mock": "0.2.2", 
"vitest": "0.31.1",

// vitest.config.ts

/// <reference types="vitest" />

import path from 'path'

import react from '@vitejs/plugin-react'
import dotenv from 'dotenv'
import svgr from 'vite-plugin-svgr'
import { defineConfig } from 'vitest/config'

// Load .env variables
dotenv.config({ path: '.env.test' })

export default defineConfig({
  plugins: [
    react(),
    svgr({
      svgrOptions: {
        svgoConfig: {
          plugins: [
            {
              // Don't remove viewBox :https://github.com/gregberge/svgr/issues/142#issuecomment-1035844445
              name: 'removeViewBox',
              active: false,
            },
          ],
        },
      },
    }),
  ],
  resolve: {
    alias: {
      '@/public': path.resolve(__dirname, './public'), // This alias must place before `@` alias
      '@': path.resolve(__dirname, './src'),
    },
  },
  test: {
    include: ['src/**/*.test.{js,jsx,ts,tsx}'],
    exclude: ['src/test/e2e'],
    testTimeout: 60000,
    globals: true,
    environment: 'jsdom',
    deps: {
      inline: ['vitest-canvas-mock'],
    },
    setupFiles: ['vitest.setup.ts'],
    snapshotFormat: {
      // Make snapshot output look like Jest's snapshot
      printBasicPrototype: false,
    },
    silent: true,
    threads: false,
    environmentOptions: {
      jsdom: {
        resources: 'usable',
      },
    },
  },
})

// vitest.setup.ts

import 'vitest-canvas-mock'
import { createElement } from 'react'

import { loadEnvConfig } from '@next/env'
import { setGlobalConfig } from '@storybook/testing-react'
import matchers from '@testing-library/jest-dom/matchers'
import { cleanup } from '@testing-library/react'
import { setConfig } from 'next/config'
import { afterAll, afterEach, beforeAll, expect, vi } from 'vitest'

import './src/test/__mocks__/matchMedia.mock' // this line must place before `globalStorybookConfig`
import * as globalStorybookConfig from './.storybook/preview' // path of your preview.js file
import config from './next.config'

import { server as mswServer } from '@/mocks/server'

loadEnvConfig(__dirname, true, { info: () => null, error: console.error })

// extends Vitest's expect method with methods from react-testing-library,
// ex: expect(...).toBeInTheDocument()
expect.extend(matchers)

beforeAll(() => {
  mswServer.listen()
})
afterAll(() => {
  mswServer.close()
})
afterEach(() => {
  cleanup()
  vi.clearAllMocks()
  mswServer.resetHandlers()
})

setConfig(config())
setGlobalConfig(globalStorybookConfig)

[erwanlfrt]

I have the same error on my project. This is due to to the latest version of jest-canvas-mock 2.5.1. npm i -D jest-canvas-mock@2.5.0 to install the previous version.

[bas00445]

@erwanlfrt Thank you for the solution, it's working now🎉

In my case, I'm using yarn. The solution is

1. Add jest-canvas-mock in the resolutions field inside package.json

"resolutions": {
    "jest-canvas-mock": "2.5.0"
  },

2. yarn install again