Vitest 单元测试方案

简介

Vitest 是一个面向 Vite 的极快的单元测试框架。它利用了 Vite 的优势,提供了一种全新的测试体验。本文将介绍如何在项目中集成和使用 Vitest 进行单元测试。

安装 Vitest

npm install -D vitest

配置 Vitest

在项目根目录下创建 vitest.config.js 文件,用于配置 Vitest。

更多详细配置 cn.vitest.dev/config/

js 复制代码
test: {
    globals: true,
    environment: 'happy-dom',
    restoreMocks: true,
    include: ['**/*.{test,spec,type-test}.{js,mjs,cjs,ts,tsx,jsx}'],
    coverage: {
      exclude: ['tests/**', '.eslintrc.cjs'],
      reporter: ['cobertura', 'text', 'html', 'clover', 'json'],
    },
    setupFiles: `${path.resolve(__dirname, 'tests/setup.ts')}`,
    snapshotFormat: {
      printBasicPrototype: true,
    },
    alias: []
  },

配置 Vitest公共文件

在项目根目录下创建setup-test.ts文件,用于统一处理定时器,原生事件,以及在vitest环境下无法模拟的事件

ini 复制代码
import { vi, describe, it, expect } from 'vitest';

import '@testing-library/jest-dom/vitest';
import MockAdapter from 'axios-mock-adapter';
import axios from 'axios';
import { configure } from '.';

export const mock = new MockAdapter(axios);

configure({
  renderMode: 'global',
  enableMultipleSelection: false,
});

beforeEach(() => {
  mock.reset();
  console.error = vi.fn();
  console.warn = vi.fn();
  vi.useFakeTimers();
  window.requestIdleCallback = vi.fn();
  document.execCommand = vi.fn();
  window.onresize = vi.fn();
  vi.setSystemTime(new Date(1680278400000));
});

afterEach(() => {
  mock.reset();
  vi.useRealTimers();
});

window.vi = vi;
window.describe = describe;
window.it = it;
window.expect = expect;
  • 全局暴露 vi describe it expect 方法,如果以后更换测试框架,单元测试内部代码无需改动
  • 全局暴露mock,并在beforeEachafterEach 清空相关的mock接口
  • 初始化单元测试环境内时间

单元测试分类

  • 单元测试 :主要是对项目里的最小 组件 或模块 进行测试,一般是在非浏览器环境下的测试
  • 集成测试 :一般是对单元测试下的多个最小单元组成的较大 组件 或模块 进行小型的组合测试,一般是在非浏览器环境下的测试。
  • 端到端 测试 (E2E) : 从用户的视角出发,基于整个页面或者应用,模拟用户操作 测试,一般是在浏览器环境下的测试

如何编写 单元测试

在项目src目录平级的位置,新建tests文件,tests文件夹下新建mocks文件夹

  • mocks下主要存放对应单元测试模拟数据的文件
  • tests下主要存放对应的单元测试文件

如何模拟接口请求

在项目中引入axios-mock-adapter第三方工具库,在进行测试的test文件下新建Mock文件夹,然后新建 test-demo-mock.ts文件。 详细配置 github.com/ctimmerm/ax...

typescript 复制代码
import { mock } from '../../../src/setup-test';

export const TestDemoMock = {
  getUsersTitle: (status: number) => {
    mock.onGet('/users/title').reply(status, { title: '江雾' });
  },
}; 

编写测试用例

新建一个test-demo.tsx文件,编写React组件

javascript 复制代码
import axios from 'axios';
import { useEffect, useState } from 'react';
const TextDemo: React.FC = () => {
  const [title, setTitle] = useState('测试');
  const getTitleValue = async () => {
    const response = await axios.get('/users/title');
    const { status, data } = response;
    if (status === 200) {
      setTitle(data.title);
    } else {
      // error
      setTitle('接口异常');
    }
  };
  const changeBtn = () => {
    setTitle('江雾');
  };
  return (
    <div className="test-dome-content">
      <span className="title"> {title} </span>
      <button className="refresh-button" onClick={getTitleValue}>
        refresh
      </button>
      <button onClick={changeBtn} className="change-btn">
        change
      </button>
    </div>
  );
};
export default TextDemo;

新建test-demo.test.ts单元测试文件

dart 复制代码
import { fireEvent, render } from '@testing-library/react';
import TextDemo from '../../src/test-demo';
import { TestDemoMock } from './Mock/test-demo-mock';

describe('getUser', () => {
  it('mount title', async () => {
    const { container } = render(<TextDemo />);
    // 初始化期望 页面标题为测试
    const title = document.body.querySelector('.test-dome-content .title');
    expect(title?.innerHTML).toBe('测试');
  });

  it('change title', async () => {
    await TestDemoMock.getUsersTitle(200);
    render(<TextDemo />);
    // 初始化期望 页面标题为测试
    const title = document.body.querySelector('.test-dome-content .title');
    expect(title?.innerHTML).toBe('测试');
    // 点击按钮
    const btn = document.body.querySelector(
      '.test-dome-content .refresh-button',
    );
    fireEvent.click(btn!);
    await vi.waitFor(() => {
      const targetTitle = document.body.querySelector(
        '.test-dome-content .title',
      );
      expect(targetTitle?.innerHTML).toBe('江雾');
    });
  });
  it('change title error', async () => {
    // 模拟接口请求
    await TestDemoMock.getUsersTitle(201);
    render(<TextDemo />);
    // 初始化期望 页面标题为测试
    const title = document.body.querySelector('.test-dome-content .title');
    expect(title?.innerHTML).toBe('测试');
    // 点击按钮
    const btn = document.body.querySelector(
      '.test-dome-content .refresh-button',
    );
    fireEvent.click(btn!);
    // 期望接口失败内容为接口异常
    await vi.waitFor(() => {
      const title = document.body.querySelector('.test-dome-content .title');
      expect(title?.innerHTML).toBe('接口异常');
    });
  });
});

常见的命令

  • pnpm run test : 执行所有单元测试
  • pnpm test xxx.test.ts : 执行某个单元测试文件
  • pnpm run coverage: 覆盖率报告

代码覆盖率报告

执行 pnpm run coverage 会生成coverage 文件夹,将其中的index.html 拖入浏览器中,查看具体的单元测试代码覆盖详情

E2E快速补齐单测方案

自动化录制解决方案

小记

后续会调研下E2E自动录制快速补齐的方法,如果可以,再次记录到该文章

相关推荐
GISer_Jing4 小时前
React核心功能详解(一)
前端·react.js·前端框架
FØund4047 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
疯狂的沙粒8 小时前
如何在 React 项目中应用 TypeScript?应该注意那些点?结合实际项目示例及代码进行讲解!
react.js·typescript
鑫宝Code8 小时前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架
沉默璇年17 小时前
react中useMemo的使用场景
前端·react.js·前端框架
红绿鲤鱼19 小时前
React-自定义Hook与逻辑共享
前端·react.js·前端框架
loey_ln21 小时前
FIber + webWorker
javascript·react.js
zhenryx21 小时前
前端-react(class组件和Hooks)
前端·react.js·前端框架
老码沉思录1 天前
React Native 全栈开发实战班 - 性能与调试之打包与发布
javascript·react native·react.js
沉默璇年1 天前
react中Fragment的使用场景
前端·react.js·前端框架