【vitest 单元测试】如何蹭 ant-design-web3 的PR-Toy模板网

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

这篇文章分享单测经验，希望你能收获到有用的单测知识或者pr思路，填补单测的过程可以深刻理解组件内部的每一个流程，相信一定有所收获。

前言

最近刚好在做一些单测覆盖的工作，在排查执行不到的地方的过程，可以梳理整个组件执行的脉络，甚至发现一些可以优化组件的地方。
正常我们写完一个组件之后应该根据预期的执行来写好单测，这样的话如果后面有其他人动了逻辑，pr的时候ci就会进行单测，然后指出报错的地方。我的第一个单测试从下图中最下面的第一个开始的，当时修了一个issue中的bug，然后需要对应去补充一些单测。
通过render渲染组件，也可以用react的hook 或者vi.mock去模拟一些事件，点击事件的话可以用fireEvent来模拟。

import React, { useEffect } from 'react';
import { fireEvent, render } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';

【vitest 单元测试】如何蹭 ant-design-web3 的PR,单元测试,react,web3,vitest,ant-design-web3

查看单测覆盖情况

运行命令，本地会生成一份临时目录

pnpm run test:coverage

【vitest 单元测试】如何蹭 ant-design-web3 的PR,单元测试,react,web3,vitest,ant-design-web3

通过live server打开html即可

【vitest 单元测试】如何蹭 ant-design-web3 的PR,单元测试,react,web3,vitest,ant-design-web3

点开具体文件地址，可以查看文件覆盖的行数

发现有红的，我们就可以写单测去完善优化它。
【vitest 单元测试】如何蹭 ant-design-web3 的PR,单元测试,react,web3,vitest,ant-design-web3

开发场景的经验

只执行某个文件的test

【vitest 单元测试】如何蹭 ant-design-web3 的PR,单元测试,react,web3,vitest,ant-design-web3

响应式场景

modal 在尺寸过于小的时候，会触发其他的模式，可能页面显示上会有点不一样

    vi.spyOn(Grid, 'useBreakpoint').mockReturnValue({
      md: true, // ≥ 768px, mock PC
    });

查看dom

通过 console.log(baseElement.outerHTML);直接输出整个dom的结构
【vitest 单元测试】如何蹭 ant-design-web3 的PR,单元测试,react,web3,vitest,ant-design-web3 文章来源地址https://www.toymoban.com/news/detail-795179.html

modal关闭

    fireEvent.click(baseElement.querySelector('.ant-modal-close')!);

    await vi.waitFor(() => {
      expect(
        baseElement.querySelector('.ant-web3-connect-button-profile-modal')?.className,
      ).toContain('ant-zoom-leave');
    });

到了这里，关于【vitest 单元测试】如何蹭 ant-design-web3 的PR的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！