Vitest 单元测试方案

这篇具有很好参考价值的文章主要介绍了Vitest 单元测试方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 🔥 交流讨论:欢迎加入我们一起学习!

🔥 资源分享耗时200+小时精选的「软件测试」资料包

🔥 教程推荐:火遍全网的《软件测试》教程  

📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!

简介

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

  安装 Vitest

  npm install -D vitest

  配置 Vitest

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

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

  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环境下无法模拟的事件

  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,并在beforeEach 与 afterEach 清空相关的mock接口

  · 初始化单元测试环境内时间

  单元测试分类

  · 单元测试:主要是对项目里的最小 组件 或模块进行测试,一般是在非浏览器环境下的测试

  · 集成测试:一般是对单元测试下的多个最小单元组成的较大 组件 或模块进行小型的组合测试,一般是在非浏览器环境下的测试。

  · 端到端 测试 (E2E) : 从用户的视角出发,基于整个页面或者应用,模拟用户操作测试,一般是在浏览器环境下的测试

  如何编写 单元测试

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

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

  · tests下主要存放对应的单元测试文件

  如何模拟接口请求

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

  详细配置 github.com/ctimmerm/ax…

  import { mock } from '../../../src/setup-test';

  export const TestDemoMock = {

    getUsersTitle: (status: number) => {

      mock.onGet('/users/title').reply(status, { title: '江雾' });

    },

  }; 

  编写测试用例

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

  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单元测试文件

  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 拖入浏览器中,查看具体的单元测试代码覆盖详情。

Vitest 单元测试方案,单元测试,压力测试,软件测试,自动化测试,jmeter

  E2E快速补齐单测方案

  自动化录制解决方案

  ·Chrome 插件 DeploySentinel Recorder

  · Chrome 插件 Headless Recorder

  · Playwrighg 官方的 CLI Playwright CLI Codegen

  · eTest 插件

最后我邀请你进入我们的【软件测试学习交流群:785128166】, 大家可以一起探讨交流软件测试,共同学习软件测试技术、面试等软件测试方方面面,还会有免费直播课,收获更多测试技巧,我们一起进阶Python自动化测试/测试开发,走向高薪之路

作为一个软件测试的过来人,我想尽自己最大的努力,帮助每一个伙伴都能顺利找到工作。所以我整理了下面这份资源,现在免费分享给大家,有需要的小伙伴可以关注【公众号:程序员二黑】自提!

Vitest 单元测试方案,单元测试,压力测试,软件测试,自动化测试,jmeter

Vitest 单元测试方案,单元测试,压力测试,软件测试,自动化测试,jmeter文章来源地址https://www.toymoban.com/news/detail-844761.html

到了这里,关于Vitest 单元测试方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 软件测试之压力测试详解

    软件测试中:压力测试(Stress Test),也称为强度测试、负载测试。压力测试是模拟实际应用的软硬件环境及用户使用过程的系统负荷,长时间或超大负荷地运行测试软件,来测试被测系统的性能、可靠性、稳定性等。 常用的压力测试软件有:LoadRunner、Apache JMeter、NeoLoad、

    2024年02月04日
    浏览(45)
  • 软件测试之压力测试详细整理

    🍅 视频学习: 文末有免费的配套视频可观看 🍅 点击文末小卡片 ,免费获取软件测试全套资料,资料在手,涨薪更快 压力测试是一种软件测试,用于验证软件应用程序的稳定性和可靠性。压力测试的目标是在极其沉重的负载条件下测量软件的健壮性和错误处理能力,并确

    2024年02月20日
    浏览(39)
  • 软件测试中的压力测试是什么?

    压力测试 压力测试是一种软件测试,用于验证软件应用程序的稳定性和可靠性。压力测试的目标是在极其沉重的负载条件下测量软件的健壮性和错误处理能力,并确保软件在危急情况下不会崩溃。它甚至可以测试超出正常工作点的测试,并评估软件在极端条件下的工作情况。

    2024年02月06日
    浏览(57)
  • Jmeter进行压力测试不为人知的秘密_jmter压力测试,软件测试面试项目

    先自我介绍一下,小编浙江大学毕业,去过华为、字节跳动等大厂,目前阿里P7 深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前! 因此收集整理了一份《2024年最新软件测试全套学习资料》

    2024年04月22日
    浏览(46)
  • 软件压力测试对软件产品起到什么作用?

    一、软件压力测试是什么? 软件压力测试是一种通过模拟正常使用环境中可能出现的大量用户和大数据量的情况,来评估软件系统在压力下的稳定性和性能表现的测试方法。在软件开发过程中,经常会遇到一些性能瓶颈和稳定性问题,而软件压力测试的作用就在于发现这些问

    2024年02月12日
    浏览(46)
  • 软件测试理论(1)压力测试有哪些评价指标

    在进行压力测试时,您可以评估多个指标来确定系统的性能和稳定性。以下是一些常见的压力测试评价指标: 平均响应时间 :请求的平均处理时间。 最大响应时间 :最长处理时间,用于确定是否存在性能问题。 百分位数响应时间

    2024年02月07日
    浏览(47)
  • 软件进行压力测试的主要目的

    软件进行压力测试是指通过模拟大量用户访问和负载压力,在正常和峰值使用情况下对软件系统进行测试的过程。软件进行压力测试的主要目的是确保软件在实际应用中能够稳定、可靠地运行,满足用户的需求。   首先,软件进行压力测试的主要目的是评估系统的性能和稳定

    2024年02月16日
    浏览(44)
  • 5款软件压力测试工具分享

    一、什么是软件压力测试? 软件压力测试是一种基本的质量保证行为,它是每个重要软件测试工作的一部分。软件压力测试的基本思路很简单:不是在常规条件下运行手动或自动测试,而是在计算机数量较少或系统资源匮乏的条件下运行测试。通常要进行软件压力测试的资源

    2024年02月02日
    浏览(40)
  • 软件测评中心▏性能测试之压力测试、负载测试的区别和联系简析

    在如今的信息时代,软件已经成为人们日常工作和生活不可或缺的一部分。然而,随着软件的发展和应用范围的不断扩大,软件性能的优劣也成为了影响用户使用体验的重要因素。 软件性能测试即对软件在不同条件下的性能进行评估和验证的过程。通过模拟多种真实场景和负

    2024年01月22日
    浏览(46)
  • 软件为什么要进行性能压力测试?

    软件为什么要进行性能压力测试?随着软件应用的不断增多和复杂度的提高,软件的性能对用户体验和业务成功至关重要。性能问题可能导致软件运行缓慢、崩溃或无响应,给用户带来不便甚至损失。为了确保软件能够在高负载和压力下正常运行,性能压力测试变得至关重要

    2024年02月13日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包