类型错误：无法读取未定义的属性（读取“测试”）-Vitest

Question

尝试使用 vitest 设置测试并运行

npm run test

时，

test()

会引发错误：

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

当显式导入在测试文件中声明为

import {test} from "vitest"

且将

globals: true

添加到配置中时，会引发错误。

当显式导入

import {test} from "vitest"

被注释掉并将

globals: true

添加到配置中时，不会引发错误。

当从配置中删除

globals: true

时，仅显式导入

import {test} from "vitest"

会引发相同的错误。

如何解决此错误，以便仅声明

import {test} from "vitest"

的显式导入语句，而不将

globals

键添加到配置对象？

文件.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"
  }
}

Answer 1

The error indicates that `test` might not be recognized correctly due to a potential issue with the configuration setup for vitest. To troubleshoot, make sure that the vitest plugin is properly integrated into Vite. Your import statement in `vite.config.js appears correct.


`

    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    import vitest from '@vitest/vite-plugin'
    
    export default defineConfig({
      plugins: [react(), vitest()],
      //! and other

})
`
Ensure that you have installed the @vitest/vite-plugin package using either npm or yarn.

second, consult the vitest documentation to determine if there are any specific configurations that need to be set. While your vite.config.js appears to be correctly configured based on the provided code, additional settings may be necessary in some cases.

third, confirm that the structure of your test files is correct. The import statement for test from vitest in your file.test.js seems to be accurate.

`

    import test from "vitest"
    test('Test', () => {});

`


final, make sure to check that all dependencies are current, including Vite, vitest, and any associated packages.