fix: 修复集成测试组件导入错误
- 为 news-section.integration.test.tsx 添加 lucide-react mock - 为 products-section.integration.test.tsx 添加 lucide-react mock - 为 services-section.integration.test.tsx 添加 lucide-react mock - 修复 ESLint 错误:使用具体类型替代 any,添加 displayName,使用 import 替代 require 问题原因:测试文件缺少 lucide-react 图标库的 mock,导致组件渲染失败 解决方案:添加 lucide-react 的 mock,将图标组件替换为简单的 span 元素 测试结果: - news-section.integration.test.tsx: 16 passed - products-section.integration.test.tsx: 16 passed - services-section.integration.test.tsx: 11 passed - 总计: 43 passed
This commit is contained in:
@@ -2,23 +2,31 @@ import { describe, it, expect, beforeEach, afterEach, jest } from '@jest/globals
|
|||||||
import { render, screen, waitFor } from '@testing-library/react';
|
import { render, screen, waitFor } from '@testing-library/react';
|
||||||
import '@testing-library/jest-dom';
|
import '@testing-library/jest-dom';
|
||||||
import { NewsSection } from './news-section';
|
import { NewsSection } from './news-section';
|
||||||
|
import type { ReactNode } from 'react';
|
||||||
|
|
||||||
jest.mock('framer-motion', () => ({
|
jest.mock('framer-motion', () => ({
|
||||||
motion: {
|
motion: {
|
||||||
div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
|
div: ({ children, ...props }: { children?: ReactNode; [key: string]: unknown }) => <div {...props}>{children}</div>,
|
||||||
},
|
},
|
||||||
useInView: () => true,
|
useInView: () => true,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
jest.mock('next/link', () => {
|
jest.mock('next/link', () => {
|
||||||
return ({ children, href }: any) => <a href={href}>{children}</a>;
|
const MockLink = ({ children, href }: { children?: ReactNode; href: string }) => <a href={href}>{children}</a>;
|
||||||
|
MockLink.displayName = 'MockLink';
|
||||||
|
return MockLink;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
jest.mock('lucide-react', () => ({
|
||||||
|
ArrowRight: () => <span>ArrowRight</span>,
|
||||||
|
Calendar: () => <span>Calendar</span>,
|
||||||
|
}));
|
||||||
|
|
||||||
jest.mock('@/hooks/use-news', () => ({
|
jest.mock('@/hooks/use-news', () => ({
|
||||||
useNews: jest.fn(),
|
useNews: jest.fn(),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const { useNews } = require('@/hooks/use-news');
|
import { useNews } from '@/hooks/use-news';
|
||||||
|
|
||||||
describe('NewsSection Integration', () => {
|
describe('NewsSection Integration', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
|
|||||||
@@ -2,23 +2,32 @@ import { describe, it, expect, beforeEach, afterEach, jest } from '@jest/globals
|
|||||||
import { render, screen, waitFor } from '@testing-library/react';
|
import { render, screen, waitFor } from '@testing-library/react';
|
||||||
import '@testing-library/jest-dom';
|
import '@testing-library/jest-dom';
|
||||||
import { ProductsSection } from './products-section';
|
import { ProductsSection } from './products-section';
|
||||||
|
import type { ReactNode } from 'react';
|
||||||
|
|
||||||
jest.mock('framer-motion', () => ({
|
jest.mock('framer-motion', () => ({
|
||||||
motion: {
|
motion: {
|
||||||
div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
|
div: ({ children, ...props }: { children?: ReactNode; [key: string]: unknown }) => <div {...props}>{children}</div>,
|
||||||
},
|
},
|
||||||
useInView: () => true,
|
useInView: () => true,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
jest.mock('next/link', () => {
|
jest.mock('next/link', () => {
|
||||||
return ({ children, href }: any) => <a href={href}>{children}</a>;
|
const MockLink = ({ children, href }: { children?: ReactNode; href: string }) => <a href={href}>{children}</a>;
|
||||||
|
MockLink.displayName = 'MockLink';
|
||||||
|
return MockLink;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
jest.mock('lucide-react', () => ({
|
||||||
|
ArrowRight: () => <span>ArrowRight</span>,
|
||||||
|
Check: () => <span>Check</span>,
|
||||||
|
TrendingUp: () => <span>TrendingUp</span>,
|
||||||
|
}));
|
||||||
|
|
||||||
jest.mock('@/hooks/use-products', () => ({
|
jest.mock('@/hooks/use-products', () => ({
|
||||||
useProducts: jest.fn(),
|
useProducts: jest.fn(),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const { useProducts } = require('@/hooks/use-products');
|
import { useProducts } from '@/hooks/use-products';
|
||||||
|
|
||||||
describe('ProductsSection Integration', () => {
|
describe('ProductsSection Integration', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
|
|||||||
@@ -2,23 +2,34 @@ import { describe, it, expect, beforeEach, afterEach, jest } from '@jest/globals
|
|||||||
import { render, screen, waitFor } from '@testing-library/react';
|
import { render, screen, waitFor } from '@testing-library/react';
|
||||||
import '@testing-library/jest-dom';
|
import '@testing-library/jest-dom';
|
||||||
import { ServicesSection } from './services-section';
|
import { ServicesSection } from './services-section';
|
||||||
|
import type { ReactNode } from 'react';
|
||||||
|
|
||||||
jest.mock('framer-motion', () => ({
|
jest.mock('framer-motion', () => ({
|
||||||
motion: {
|
motion: {
|
||||||
div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
|
div: ({ children, ...props }: { children?: ReactNode; [key: string]: unknown }) => <div {...props}>{children}</div>,
|
||||||
},
|
},
|
||||||
useInView: () => true,
|
useInView: () => true,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
jest.mock('next/link', () => {
|
jest.mock('next/link', () => {
|
||||||
return ({ children, href }: any) => <a href={href}>{children}</a>;
|
const MockLink = ({ children, href }: { children?: ReactNode; href: string }) => <a href={href}>{children}</a>;
|
||||||
|
MockLink.displayName = 'MockLink';
|
||||||
|
return MockLink;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
jest.mock('lucide-react', () => ({
|
||||||
|
Code: () => <span>Code</span>,
|
||||||
|
Cloud: () => <span>Cloud</span>,
|
||||||
|
BarChart3: () => <span>BarChart3</span>,
|
||||||
|
Shield: () => <span>Shield</span>,
|
||||||
|
ArrowRight: () => <span>ArrowRight</span>,
|
||||||
|
}));
|
||||||
|
|
||||||
jest.mock('@/hooks/use-services', () => ({
|
jest.mock('@/hooks/use-services', () => ({
|
||||||
useServices: jest.fn(),
|
useServices: jest.fn(),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const { useServices } = require('@/hooks/use-services');
|
import { useServices } from '@/hooks/use-services';
|
||||||
|
|
||||||
describe('ServicesSection Integration', () => {
|
describe('ServicesSection Integration', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
@@ -188,8 +199,7 @@ describe('ServicesSection Integration', () => {
|
|||||||
render(<ServicesSection />);
|
render(<ServicesSection />);
|
||||||
|
|
||||||
await waitFor(() => {
|
await waitFor(() => {
|
||||||
const icons = document.querySelectorAll('svg');
|
expect(screen.getByText('Code')).toBeInTheDocument();
|
||||||
expect(icons.length).toBeGreaterThan(0);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user