likes
comments
collection

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

作者站长头像
站长
· 阅读数 11

概念

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

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

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

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

特性介绍

  • 无缝衔接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

总结

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