vitest相关问题解决环境描述 "vitest": "^1.1.3", "vue": "^3.4.5", "vite"

环境描述

"vitest": "^1.1.3",
"vue": "^3.4.5",
"vite": "^5.0.11",

jsdom环境是bug最少的，建议默认环境切换为该环境

ReferenceError: document is not defined

原因: 代码中有使用dom的document对象，但当前环境不支持。

vitest的环境配置为:edge-runtime,happy-dom,jsdom

ReferenceError: document is not defined · Issue #990 · vitest-dev/vitest · GitHub

TypeError: Unknown file extension ".css"

原因： vitest中未引入第三方依赖

当有element-plus等第三方ui框架时，可能会出现这种错误。解决方案（在vitest配置文件中，加入对应的第三方ui框架依赖. 如:element-plus）

test: {
  // environment: 'edge-runtime',
  environment: 'happy-dom',
  // environment: 'jsdom',
  include: ['test/**/*.test.ts'],
  server: {
    deps: {
      // 添加这个配置解决：TypeError: Unknown file extension ".css" 错误
      inline: ['element-plus'],
    },
  },
  root: __dirname,
  setupFiles: ['./test/vitest.setup.ts'],
},

Unknown file extension ".css" when using with unplugin-vue-components · Issue #1388 · vitest-dev/vitest · GitHub (hscsec.cn)

vscode使用`Vitest Runner`插件运行vitest执行单元测试用例提示未找到可执行代码

原因: 猜测Vitest Runner可能是基于你的执行路径找可执行代码，如果你做了如下配置

test: {
      // environment: 'edge-runtime',
      environment: 'happy-dom',
      // environment: 'jsdom',
      include: ['test/**/*.test.ts'],
      server: {
        deps: {
          inline: ['element-plus'],
        },
      },
      setupFiles: ['./test/vitest.setup.ts'],
    },

而你的项目结构为

项目根目录
|--src
|--test
|---|MyTest.ts

此时会到你的test目录下通过'test/**/*.test.ts'匹配文件，那当然匹配不到，应该指定root为项目的根目录，那Vitest Runner 插件就不会基于执行目录匹配了，而是基于root值匹配

test: {
      // environment: 'edge-runtime',
      environment: 'happy-dom',
      // environment: 'jsdom',
      include: ['test/**/*.test.ts'],
      server: {
        deps: {
          inline: ['element-plus'],
        },
      },
      root: __dirname,
      setupFiles: ['./test/vitest.setup.ts'],
    },

使用happy-dom + msw时运行报错: `TypeError: response.body.getReader is not a function`

Vitest 1.0.2 with happy-dom and msw + axios results in TypeError: · Issue #1180 · capricorn86/happy-dom · GitHub (hscsec.cn)

使用happy-dom的环境，除了将vitest降级，暂无直接解决办法, 详见上面链接.

个人的解决办法是将环境改为jsdom

vue组件中包含ajax请求(如:使用`axio发送请求`)，运行测试时报错:`AxiosError: Network Error`

环境为:jsdom

原因: 可能无法执行真正的网络请求，而需要通过msw拦截网络请求再，返回模拟的响应结果

test: {
      environment: 'jsdom',
      include: ['test/**/*.test.ts'],
      server: {
        deps: {
          inline: ['element-plus'],
        },
      },
      root: __dirname,
      setupFiles: ['./test/vitest.setup.ts'],
    },

vitest.setup.ts

import { server } from './mocks/node.js'
import { beforeAll, afterEach, afterAll } from 'vitest'

beforeAll(() => {
  server.listen()
})

afterEach(() => {
  server.resetHandlers()
})

afterAll(() => {
  server.close()
})

node.ts

import { setupServer } from 'msw/node'
import { handlers } from './handlers.js'

export const server = setupServer(...handlers)

handlers.ts

import { http, HttpResponse } from 'msw'

export const handlers = [
  http.post('/api/login', () => {
    console.log('msw 请求拦截执行')
    return HttpResponse.json({
      status: 0,
      msg: '',
      data: '1',
    })
  }),
]