《高阶前端指北》之深入中出Vitest

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情

概念

依旧，概念部分很枯燥，抄过来没意思，但未了一些新人首次接触提供一个小台阶

Vitest 是一个由 Vite 提供支持的极速单元测试框架。Vitest 旨在将自己定位为 Vite 项目的首选测试框架，即使对于不使用 Vite 的项目也是一个可靠的替代方案。

Vite 而且它拥有许多插件和集成框架，从而慢慢形成一个活跃的生态社区。官网主题很漂亮哈。

特性介绍

• 无缝衔接vite
• 支持Vue/React等框架
• 测试用例支持HMR，运行速度快
• 开箱即用的 TypeScript/JSX
• 多线程支持（tinypool）
• jest 友好
• 通过 c8 输出测试用例覆盖
• 配置简单
• 日志信息很清爽

上手

提示 Vitest 需要 Vite >=v2.7.10 和 Node >=v14

我是pnpm狗，所以不推荐npm

pnpm add  vitest
复制代码

vite.config.ts介绍，以下只介绍一些简单配置:

import path from 'path';
import reactRefresh from '@vitejs/plugin-react-refresh';
import styleImport from 'vite-plugin-style-import';
import { ConfigEnv, loadEnv, UserConfigExport } from 'vite';

export default (configEnv: ConfigEnv): UserConfigExport => {
  const { command, mode } = configEnv;
  const isBuild = command !== 'serve';
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) }; // 加载env环境变量

  return {
    base: './',
    clearScreen: false,
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
        },
        scss: {
          charset: false,
        },
      },
    },
    define: { // 变量全局替换配置
      __ENV_DEV__: !isBuild,
      __PROJECT_PORT__: JSON.stringify(process.env.VITE_PROJECT_PORT),
    },
    server: {
      port: Number(process.env.VITE_PROJECT_PORT),
      hmr: { // 错误全屏警告，可以关闭
        overlay: true,
      },
    },
    resolve: {
      alias: { // dest映射配置
        '@': path.resolve('src'),
      },
    },
    esbuild: { // 自动导入react(针对17), 也可以使用@vitejs/plugin-react插件简化这一配置
      jsxInject: `import React from 'react'`,
    },
    test: {
      global: true, // --> 0.8.1+  请修改成globals
      environment: 'jsdom',
    },
    plugins: [
      reactRefresh(), // react热更新，也可以使用@vitejs/plugin-react插件简化这一配置
      styleImport({ // antd-mobile5按需加载配置
        libs: [
          {
            libraryName: 'antd-mobile',
            resolveComponent: (name) => {
              return `antd-mobile/es/components/${name}`;
            },
            resolveStyle: (name) => {
              return `antd-mobile/es/components/${name}`;
            },
          },
        ],
      }),
    ],
  };
};
复制代码

添加测试用例，npm run test运行

Mock 支持

在根目录下的 mock 目录下，可以在模块中导出默认的 api 资源。

例如 mock/test.ts 内导出

import { MockMethod } from 'vite-plugin-mock'

export default [
  {
    url: '/api/get',
    method: 'get',
    response: () => {
      return {
        code: 0,
        data: {
          name: 'vben'
        }
      }
    }
  }
] as MockMethod[]
复制代码

在 src 中就可以进行模拟请求。

<script setup lang="ts">
  import { useRequest } from "vue-request"
  // 请求接口 /api/get
  const { data, loading, error } = useRequest('/api/get') 
</script>

<template>
  <div>data: {{data}}</div>
  <div>loading: {{loading}}</div>
  <div>error: {{error}}</div>
</template>
复制代码

这里用到 vue-request 去做请求，不过因为该 mock 拦截的是一整个接口，所以换成 axios 等请求库也是可以的。

单元测试

在 src/test 目录中可以书写单元测试。

import { it, describe, expect, assert } from 'vitest'

describe('suite name', () => {

  it('foo', () => {
    expect(1 + 1).toEqual(2)
    expect(true).to.be.true
  })

  it('bar', () => {
    assert.equal(Math.sqrt(4), 2)
  })

  it('snapshot', () => {
    expect({ foo: 'bar' }).toMatchSnapshot()
  })
})
复制代码

然后在终端中输入命令即可测试

pnpm test
复制代码

或者生成报告

pnpm coverage
复制代码

总结

恭喜你，忍住了枯燥，耐住了无聊，学完了本节课。
闲着没事的朋友可以我，点个赞，评个论，收个藏，关个注。   手绘图，手打字，纯原创，摘自未发布的书籍：《高阶前端指北》，转载请获得本人同意。