CODEWITHSUNDEEP
javascriptvitest
0binny0
0binny0

Reputation: 91

TypeError: Cannot read properties of undefined (reading 'test') - Vitest

Upon trying to setting up a test with vitest and running npm run test, an error is being raised with test():

When the explicit import is declared as import {test} from "vitest" in the test file while globals: true is added to the configuration the error is raised.

When the explicit import import {test} from "vitest" is commented out and globals: true is added to the configuration the error is not raised.

When globals: true is removed from the configuration, just the explicit import import {test} from "vitest" raises the same error.

How can this error be resolved so just the explicit import statement of import {test} from "vitest" can be declared without the globals key added to the config object?

file.test.js

import { test } from "vitest";

test ("Test", () => {});

vite.config.js

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    coverage: {
      provider: "v8",
      reporter: ["json", "html", "text"]
    },
    environment: "happy-dom"
  }
})

package.json

{
  "name": "markdown_previewer",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "test": "vitest",
    "coverage": "vitest run --coverage"
  },
  "dependencies": {
    "marked": "^12.0.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^15.0.5",
    "@testing-library/user-event": "^14.5.2",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react": "^4.2.1",
    "@vitest/coverage-v8": "^1.5.3",
    "@vitest/ui": "^1.5.3",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "happy-dom": "^14.7.1",
    "vite": "^5.2.0",
    "vitest": "^1.5.3"
  }
}

Upvotes: 4

Views: 2591

Answers (1)

Ken VanderVeer
Ken VanderVeer

Reputation: 21

The issue is not actually related to globals: true even though that can get you partially around the issue. Of all things, it's likely your path and related to this bug: https://github.com/vitest-dev/vitest/issues/5251

If you're on Windows and you're in a c: based command prompt, try again in C: (Uppercase) instead. From my testing I've seen the following:

For lower c:

  • global:true and no imports - vitest run works but real-time updates for vitest do not
  • With imports - vitest fails across the board with your type error
  • With the root: fix outlined in the bug report - vitest run works but real-time updates for vitest do not

For upper C: no mitigations are necessary.

Upvotes: 2

Related Questions