refactor: use regex matchers for i18n text and add uniform mocks in test files

This commit is contained in:
雨霖铃
2026-05-22 23:51:16 +08:00
parent cc9162f601
commit 5e23b29a25
3 changed files with 64 additions and 40 deletions
+16 -17
View File
@@ -1,15 +1,15 @@
import { describe, expect, it, vi } from 'vitest';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';
import QrCodePage from '../index';
// 💡 1. 规范回归:轻量级拦截 Mock lucide-react,杜绝一切在 JSDOM 虚拟环境中潜在的图标闪烁与属性未定义红牌
vi.mock('lucide-react', () => ({
QrCode: () => <div data-testid="mock-lucide-qrcode">Icon</div>,
Type: () => <div>Type</div>,
Upload: () => <div>Upload</div>,
Image: () => <div>Image</div>,
Trash2: () => <div>Trash2</div>,
}));
vi.mock('lucide-react', async (importOriginal) => {
const actual = await importOriginal<typeof import('lucide-react')>();
return {
...actual,
// 增量伪造需要高精嗅探的 QrCode 核心定位图标
QrCode: () => <div data-testid="mock-lucide-qrcode">Icon</div>,
};
});
// Mock useLazyTranslation
vi.mock('@/utils/useLazyTranslation', () => ({
@@ -27,7 +27,7 @@ vi.mock('@/components/GlobalSnackbar', () => ({
}),
}));
// Mock getEntryPointType
// Mock getEntryPointType(保留原厂其他特征配置,仅模拟入口路由环境)
vi.mock('@/config/features', async (importOriginal) => {
const actual = await importOriginal<typeof import('@/config/features')>();
return {
@@ -36,7 +36,7 @@ vi.mock('@/config/features', async (importOriginal) => {
};
});
// Mock 子组件
// Mock 高频变化的子组件,收拢断言边界
vi.mock('@/components/QrCodePreview', () => ({
default: () => <div data-testid="qr-code-preview">QrCodePreview</div>,
}));
@@ -45,7 +45,7 @@ vi.mock('@/components/ImageUploader', () => ({
default: () => <div data-testid="image-uploader">ImageUploader</div>,
}));
// Mock QRious
// Mock QRious 动态图像离屏生成引擎
vi.mock('qrious', () => ({
default: vi.fn().mockImplementation(() => ({
toDataURL: () => 'data:image/png;base64,mock',
@@ -53,6 +53,10 @@ vi.mock('qrious', () => ({
}));
describe('QrCodePage', () => {
beforeEach(() => {
vi.clearAllMocks();
});
it('应该默认渲染生成模式', () => {
render(<QrCodePage />);
expect(screen.getByTestId('qr-code-preview')).toBeInTheDocument();
@@ -89,16 +93,11 @@ describe('QrCodePage', () => {
it('应该渲染输入区域的系统标签(对齐新版 Label 机制)', () => {
render(<QrCodePage />);
// ✅ 完美对接:重构后不管是 Generate 还是 Parse 面板,
// 其外部包裹层里的标准独立 <Label /> 组件依然包含对应的语义文本,可以顺畅被 ByText 捕获!
expect(screen.getByText('qrCode:urlInputLabel')).toBeInTheDocument();
});
it('应该渲染双翼响应式卡片网格布局', () => {
const { container } = render(<QrCodePage />);
// 💡 修复点:废除极度脆弱的 '.grid.grid-cols-1.md\\:grid-cols-2' 类名全路径拼写抓取
// 改用健壮的语义属性查询,只需检测当前容器是否处于 grid 状态,就能无视未来的微调动效,
// 测试鲁棒性直接提升到工业最高标准!
const gridContainer = container.querySelector('.grid');
expect(gridContainer).toBeInTheDocument();
});