Day5 vitest 之 vitest配置选项初体验

ps:没配置过,先初步体验一下配置效果,不会细究其配置,说人话就是先跟着官网文档的描述走一遍配置

注意1:除了以下选项之外您还可以使用 Vite 中的任何配置选项。例如, define 定义全局变量,或 resolve.alias 定义别名。

注意2:此处列出的所有选项都位于配置内的 test 属性上:

注意3:针对于所有不支持配置工作区项目的选项旁边都有 * 符号。

include

  • type

    • string[]

  • default

    • ['/.{test,spec}.?(c|m)[jt]s?(x)'

  • 功能

    • 使用glob模式包含在测试运行中的文件

  • 代码配置

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    include: ['./src/scripts/**.test.?(c|m)[jt]s?(x)']
  }
})

 目录结构

        

测试结果

        

 不做配置的测试结果

        

exclude

  • type

    • string[]

  • default

    • ['/nodemodules/','/dist/,'/cypress/','/{idea,git,cache,output,temp}/','*/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.']

  • 功能

    • 使用glob模式从测试运行中排除的文件

  • 目录配置

    • 在src下增加tests目录,在tests目录下新增a.test.js

  • 代码配置1

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    include: ['./src/scripts/**.test.?(c|m)[jt]s?(x)'],
    exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*', './src/scripts/each.test.js(x)', './src/scripts/**.test.?(c|m)[jt]s?(x)']
  }
})
  • 测试结果1

    • 和上次结果一样

       结论

                 include的优先级大于exclude,如果出现配置相同的情况,则以include的情况为主

  • 代码配置2
/// <reference types="vitest" />
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*']
  }
})
  • 测试结果2

  • 代码配置3

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*', './src/tests/**']
  }
})
  • 测试结果3

includeSource

  • Type:

    • string[]

  • default

    • []

  • 功能

    • Vitest 将运行所有包含 import.meta.vitest 的匹配文件

  • 代码配置

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*', './src/tests/**'],
    includeSource: []
  }
})
  • 测试结果1

  • 配置代码2

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*'],
    includeSource: ['./src/tests/**']
  }
})
  • 测试结果2

server

  • Type:

    • { sourcemap?, deps?, … }

  • Version:

    • Since Vitest 0.34.0

Vite-Node 服务器选项。

server.sourcemap
  • Type:

    • 'inline' | boolean

  • Default:

    • 'inline'

  • 功能

    • 将内联源映射注入到模块中。

  • 配置代码1

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*'],
    includeSource: ['./src/tests/**'],
    server: {
      sourcemap: true
    }
  }
})
  • 测试结果1

  • 配置代码2

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*'],
    includeSource: ['./src/tests/**'],
    server: {
      sourcemap: false
    }
  }
})
  • 测试结果2

  • 配置代码3

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*'],
    includeSource: ['./src/tests/**'],
    server: {
      sourcemap: "inline"
    }
  }
})
  • 测试结果3

server.debug
  • Type:

    • { dumpModules?, loadDumppedModules? }

  • dumpModules

    • Type:

      • boolean | string
    • 功能

      • 将转换后的模块转储到文件系统。传递字符串将转储到指定路径
  • loadDumppedModules

    • Type:

      • boolean
    • 功能

      • 只要存在,就从文件系统中读取转储的模块。通过修改文件系统的转储结果可用于调试
  • 配置代码1

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*'],
    includeSource: ['./src/tests/**'],
    server: {
      sourcemap: "inline",
      debug: {
        dumpModules: true,
        loadDumppedModules: true,
      }
    }
  }
})
  • 测试结果1

server.deps
  • Type:

    • { external?, inline?, … }

  • 功能

    • 处理依赖关系解析。

  • server.deps.external

    • Type:

      • (string | RegExp)[]
    • Default:

      • [/\/node_modules\//]
    • 功能

      • 外部化(Externalize)是指Vite将包绕过到原生Node。

      • 外部化依赖不会应用于 Vite 的转换器和解析器,因此它们不支持重新加载时的 HMR。

      • 默认情况下, node_modules 内的所有包都被外部化。

  • server.deps.inline

    • Type:

      • (string | RegExp)[] | true
    • Default:

      • []
    • 功能

      • Vite将处理内联模块。这可能有助于处理以 ESM 格式发送 .js 的包(Node 无法处理)

      • 如果 true ,每个依赖项都将被内联

      • 默认情况下, ssr.noExternal 中指定的所有依赖项都将内联。

  • 配置代码

    • /// <reference types="vitest" />
      import { defineConfig } from 'vite'
      import vue from '@vitejs/plugin-vue'
      
      // https://vitejs.dev/config/
      export default defineConfig({
        plugins: [vue()],
        test: {
          exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*'],
          includeSource: ['./src/tests/**'],
          server: {
            sourcemap: "inline",
            debug: {
              dumpModules: true,
              loadDumppedModules: true,
            },
            deps: {
              inline: true
            }
          }
        }
      })
      

      测试结果

 server.deps.fallbackCJS

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**', '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*'],
    includeSource: ['./src/tests/**'],
    server: {
      sourcemap: "inline",
      debug: {
        dumpModules: true,
        loadDumppedModules: true,
      },
      deps: {
        inline: true,
        fallbackCJS: false
      }
    }
  }
})

测试结果:设置为true或者false都会报错

  • server.deps.cacheDir

    • Type

      • string
    • Default:

      • 'node_modules/.vite'
    • 功能

      • 保存缓存文件的目录。
    • 问题:

      • 和上一个一样,直接设置会报错
  • 22
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值