这篇文章分享单测经验,希望你能收获到有用的单测知识或者pr思路,填补单测的过程可以深刻理解组件内部的每一个流程,相信一定有所收获。
ant-design-web3
- 前言
- 查看单测覆盖情况
- 运行命令,本地会生成一份临时目录
- 通过live server打开html即可
- 点开具体文件地址,可以查看文件覆盖的行数
- 开发场景的经验
- 只执行某个文件的test
- 响应式场景
- 查看dom
- modal关闭
前言
-
最近刚好在做一些单测覆盖的工作,在排查执行不到的地方的过程,可以梳理整个组件执行的脉络,甚至发现一些可以优化组件的地方。
-
正常我们写完一个组件之后应该根据预期的执行来写好单测,这样的话如果后面有其他人动了逻辑,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';
查看单测覆盖情况
运行命令,本地会生成一份临时目录
pnpm run test:coverage
通过live server打开html即可
点开具体文件地址,可以查看文件覆盖的行数
发现有红的,我们就可以写单测去完善优化它。
开发场景的经验
只执行某个文件的test
响应式场景
modal 在尺寸过于小的时候,会触发其他的模式,可能页面显示上会有点不一样
vi.spyOn(Grid, 'useBreakpoint').mockReturnValue({
md: true, // ≥ 768px, mock PC
});
查看dom
通过 console.log(baseElement.outerHTML);
直接输出整个dom的结构
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');
});