🛠️ 工程化工具 - TESTING

What are the categories of front-end testing? What are their respective roles?

考察点：测试分类理解。

答案：

前端测试主要分为单元测试、集成测试、端到端测试等多个层次，每种测试都有其特定的作用和适用场景。这些测试类型形成了完整的测试金字塔，从底层到顶层保障应用质量。

主要分类：

1. 单元测试（Unit Testing）：

   // 测试单个函数或组件
   describe('add function', () => {
     test('should return sum of two numbers', () => {
       expect(add(2, 3)).toBe(5);
     });
   });
   

2. 集成测试（Integration Testing）：

   // 测试组件间交互
   test('should handle user login flow', async () => {
     render(<LoginForm />);
     fireEvent.change(screen.getByLabelText('Username'), { target: { value: 'user' } });
     fireEvent.click(screen.getByText('Login'));
     await waitFor(() => expect(mockApiCall).toHaveBeenCalled());
   });
   

3. 端到端测试（E2E Testing）：

   // 使用 Cypress 进行完整流程测试
   cy.visit('/login');
   cy.get('[data-cy=username]').type('testuser');
   cy.get('[data-cy=password]').type('password');
   cy.get('[data-cy=login-btn]').click();
   cy.url().should('include', '/dashboard');
   

复杂度分析：

• 实现成本：单元测试 < 集成测试 < E2E测试
• 运行速度：E2E测试 < 集成测试 < 单元测试
• 覆盖范围：单元测试 < 集成测试 < E2E测试

适用场景：

• 单元测试：工具函数、业务逻辑、组件行为验证
• 集成测试：API调用、页面交互、数据流验证
• E2E测试：关键用户路径、完整业务流程验证
• 快照测试：UI组件渲染结果对比

实际应用：

• 采用测试金字塔原则：70% 单元测试，20% 集成测试，10% E2E测试
• 结合CI/CD流程，确保代码质量
• 使用测试覆盖率工具监控测试完整性

What is unit testing? Why write unit tests?

考察点：单元测试基础。

答案：

单元测试是对软件中最小可测试单元进行检查和验证的测试方法。在前端开发中，单元通常指单个函数、类或组件。单元测试的目标是验证每个单元的功能是否按预期工作。

主要特点：

1. 测试粒度小：针对单个函数或方法
2. 运行速度快：不依赖外部系统
3. 易于调试：问题定位精确
4. 可重复执行：结果稳定可靠

编写单元测试的原因：

1. 提高代码质量：

   // 测试边界条件，发现潜在bug
   describe('divide function', () => {
     test('should handle division by zero', () => {
       expect(() => divide(10, 0)).toThrow('Division by zero');
     });
     
     test('should return correct result', () => {
       expect(divide(10, 2)).toBe(5);
     });
   });
   

2. 便于重构：

   // 重构时确保功能不变
   function formatPrice(price) {
     return `$${price.toFixed(2)}`;
   }
   
   test('should format price correctly', () => {
     expect(formatPrice(19.99)).toBe('$19.99');
     expect(formatPrice(5)).toBe('$5.00');
   });
   

3. 文档作用：

   // 测试用例即是使用说明
   describe('UserValidator', () => {
     test('should validate email format', () => {
       expect(UserValidator.isValidEmail('[email protected]')).toBe(true);
       expect(UserValidator.isValidEmail('invalid')).toBe(false);
     });
   });
   

主要优势：

• 及早发现错误：在开发阶段就能发现问题
• 降低维护成本：减少后期bug修复时间
• 提升开发信心：敢于重构和优化代码
• 促进良好设计：编写可测试的代码往往结构更清晰

实际应用：

• 工具函数和业务逻辑测试
• React/Vue组件的props和state测试
• API调用和数据处理函数测试
• 配合TDD开发模式提升代码质量

What are the basic usage methods of Jest testing framework?

考察点：测试工具基础。

答案：

Jest是Facebook开发的JavaScript测试框架，提供了测试运行器、断言库、模拟功能等一体化解决方案。它具有零配置、快照测试、并行执行等特性，是React项目的默认测试框架。

基本配置：

1. 安装和初始化：

   // 安装Jest
   npm install --save-dev jest
   
   // package.json配置
   {
     "scripts": {
       "test": "jest",
       "test:watch": "jest --watch",
       "test:coverage": "jest --coverage"
     },
     "jest": {
       "testEnvironment": "jsdom",
       "setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"]
     }
   }
   

2. 基本测试语法：

   // math.test.js
   import { add, subtract } from './math';
   
   describe('Math functions', () => {
     test('adds 1 + 2 to equal 3', () => {
       expect(add(1, 2)).toBe(3);
     });
     
     test('subtracts 5 - 3 to equal 2', () => {
       expect(subtract(5, 3)).toBe(2);
     });
   });
   

3. 常用断言方法：

   // 基本断言
   expect(2 + 2).toBe(4);                    // 严格相等
   expect({name: 'John'}).toEqual({name: 'John'}); // 深度相等
   expect('Hello World').toMatch(/World/);    // 正则匹配
   expect(['A', 'B', 'C']).toContain('B');    // 数组包含
   expect(() => throw new Error()).toThrow(); // 抛出异常
   
   // 异步测试
   test('async function', async () => {
     await expect(fetchUser()).resolves.toEqual({id: 1, name: 'John'});
   });
   

核心功能：

1. Mock功能：

   // 函数Mock
   const mockFn = jest.fn();
   mockFn.mockReturnValue(42);
   expect(mockFn()).toBe(42);
   
   // 模块Mock
   jest.mock('./api', () => ({
     fetchUsers: jest.fn().mockResolvedValue([{id: 1, name: 'John'}])
   }));
   

2. 快照测试：

   // 组件快照
   test('renders correctly', () => {
     const tree = renderer.create(<Button>Click me</Button>).toJSON();
     expect(tree).toMatchSnapshot();
   });
   

常用配置选项：

• testMatch: 指定测试文件匹配模式
• collectCoverageFrom: 覆盖率统计文件范围
• setupFilesAfterEnv: 测试环境初始化文件
• transform: 文件转换规则

实际应用：

• React组件和Hook测试
• Node.js后端API测试
• 工具函数和业务逻辑测试
• 与React Testing Library结合进行组件集成测试

How to test JavaScript functions?

考察点：函数测试方法。

答案：

JavaScript函数测试是单元测试的核心内容，需要验证函数在各种输入条件下的行为是否符合预期。测试应该覆盖正常情况、边界条件和异常情况。

基本测试原则：

1. 测试函数的输入和输出关系
2. 覆盖所有分支和边界条件
3. 验证副作用和错误处理
4. 保持测试简单和独立

测试方法：

1. 纯函数测试：

   // 被测试函数
   function calculateTax(price, rate) {
     if (typeof price !== 'number' || typeof rate !== 'number') {
       throw new Error('Invalid input: price and rate must be numbers');
     }
     if (price < 0 || rate < 0 || rate > 1) {
       throw new Error('Invalid range: price >= 0, rate between 0 and 1');
     }
     return price * rate;
   }
   
   // 测试用例
   describe('calculateTax', () => {
     test('should calculate tax correctly', () => {
       expect(calculateTax(100, 0.1)).toBe(10);
       expect(calculateTax(0, 0.1)).toBe(0);
       expect(calculateTax(50, 0)).toBe(0);
     });
     
     test('should handle edge cases', () => {
       expect(calculateTax(100, 1)).toBe(100);
       expect(calculateTax(0.01, 0.05)).toBeCloseTo(0.0005);
     });
     
     test('should throw error for invalid input', () => {
       expect(() => calculateTax('100', 0.1)).toThrow('Invalid input');
       expect(() => calculateTax(100, -0.1)).toThrow('Invalid range');
     });
   });
   

2. 异步函数测试：

   // Promise函数
   async function fetchUserData(userId) {
     const response = await fetch(`/api/users/${userId}`);
     if (!response.ok) {
       throw new Error('User not found');
     }
     return response.json();
   }
   
   // 测试异步函数
   test('should fetch user data', async () => {
     global.fetch = jest.fn().mockResolvedValue({
       ok: true,
       json: jest.fn().mockResolvedValue({id: 1, name: 'John'})
     });
     
     const user = await fetchUserData(1);
     expect(user).toEqual({id: 1, name: 'John'});
     expect(fetch).toHaveBeenCalledWith('/api/users/1');
   });
   
   test('should handle fetch error', async () => {
     global.fetch = jest.fn().mockResolvedValue({
       ok: false
     });
     
     await expect(fetchUserData(999)).rejects.toThrow('User not found');
   });
   

3. 有副作用函数测试：

   // 有副作用的函数
   function saveToLocalStorage(key, value) {
     try {
       localStorage.setItem(key, JSON.stringify(value));
       return true;
     } catch (error) {
       console.error('Failed to save:', error);
       return false;
     }
   }
   
   // Mock副作用
   test('should save to localStorage', () => {
     const mockSetItem = jest.spyOn(Storage.prototype, 'setItem');
     const mockConsoleError = jest.spyOn(console, 'error').mockImplementation();
     
     const result = saveToLocalStorage('user', {id: 1});
     
     expect(result).toBe(true);
     expect(mockSetItem).toHaveBeenCalledWith('user', '{"id":1}');
     
     mockSetItem.mockRestore();
     mockConsoleError.mockRestore();
   });
   

测试用例设计策略：

• 等价类划分：将输入分为有效和无效类别
• 边界值测试：测试临界值和边界条件
• 错误路径测试：验证异常处理逻辑
• 组合测试：测试多个参数的组合情况

实际应用：

• 工具函数库的完整测试覆盖
• 业务逻辑函数的行为验证
• API调用封装函数的模拟测试
• 数据处理和格式化函数测试

What is Mock? What is its role in testing?

考察点：Mock概念理解。

答案：

Mock是测试中的模拟对象，用来替代真实的依赖项，控制测试环境和验证交互行为。Mock可以模拟函数调用、API响应、模块依赖等，使测试更加独立、稳定和快速。

Mock的核心作用：

1. 隔离依赖：将被测试单元与外部依赖隔离
2. 控制行为：预设模拟对象的返回值和行为
3. 验证交互：检查函数是否按预期被调用
4. 提升性能：避免真实的网络请求和数据库操作

Mock类型和使用方法：

1. 函数Mock：

   // 创建Mock函数
   const mockCallback = jest.fn();
   mockCallback.mockReturnValue(42);
   mockCallback.mockReturnValueOnce('first call');
   
   // 验证调用
   expect(mockCallback).toHaveBeenCalled();
   expect(mockCallback).toHaveBeenCalledWith('arg1', 'arg2');
   expect(mockCallback).toHaveBeenCalledTimes(2);
   
   // 模拟异步返回
   mockCallback.mockResolvedValue('async result');
   mockCallback.mockRejectedValue(new Error('async error'));
   

2. 模块Mock：

   // Mock整个模块
   jest.mock('./api', () => ({
     fetchUsers: jest.fn(),
     createUser: jest.fn()
   }));
   
   import { fetchUsers } from './api';
   
   test('should call fetchUsers', async () => {
     fetchUsers.mockResolvedValue([{id: 1, name: 'John'}]);
     
     const users = await fetchUsers();
     expect(users).toHaveLength(1);
     expect(fetchUsers).toHaveBeenCalledTimes(1);
   });
   

3. 部分Mock：

   // 只Mock部分功能
   jest.mock('./utils', () => ({
     ...jest.requireActual('./utils'),
     getCurrentTime: jest.fn(() => '2024-01-01T00:00:00.000Z')
   }));
   

4. 对象方法Mock：

   // Spy on 对象方法
   const user = {
     getName: () => 'John',
     setName: (name) => { this.name = name; }
   };
   
   const mockGetName = jest.spyOn(user, 'getName');
   mockGetName.mockReturnValue('Mocked John');
   
   expect(user.getName()).toBe('Mocked John');
   expect(mockGetName).toHaveBeenCalled();
   
   mockGetName.mockRestore(); // 恢复原始实现
   

实际应用场景：

1. API调用Mock：

   // Mock HTTP请求
   global.fetch = jest.fn(() =>
     Promise.resolve({
       ok: true,
       json: () => Promise.resolve({ data: 'mocked data' })
     })
   );
   
   test('should handle API response', async () => {
     const result = await apiService.getData();
     expect(result.data).toBe('mocked data');
     expect(fetch).toHaveBeenCalledWith('/api/data');
   });
   

2. 浏览器API Mock：

   // Mock localStorage
   const localStorageMock = {
     getItem: jest.fn(),
     setItem: jest.fn(),
     removeItem: jest.fn(),
     clear: jest.fn()
   };
   Object.defineProperty(window, 'localStorage', {
     value: localStorageMock
   });
   
   // Mock Date
   jest.useFakeTimers();
   jest.setSystemTime(new Date('2024-01-01'));
   

Mock最佳实践：

• 最小化Mock范围：只Mock必要的依赖
• 清晰的Mock预期：明确设置返回值和行为
• 测试后清理：使用afterEach清理Mock状态
• 避免过度Mock：保持测试的真实性

实际应用：

• 单元测试中隔离外部依赖
• 集成测试中控制第三方服务
• 组件测试中模拟props和回调
• 性能测试中替代耗时操作

What are the testing strategies for React/Vue components?

考察点：组件测试方法。

答案：

前端组件测试主要验证组件的渲染输出、用户交互、状态变化和props传递等行为。测试策略应该从用户角度出发，关注组件的实际使用场景而不是实现细节。

React组件测试策略：

1. 渲染测试：

   import { render, screen } from '@testing-library/react';
   import UserProfile from './UserProfile';
   
   test('renders user information', () => {
     const user = { name: 'John Doe', email: '[email protected]' };
     render(<UserProfile user={user} />);
     
     expect(screen.getByText('John Doe')).toBeInTheDocument();
     expect(screen.getByText('[email protected]')).toBeInTheDocument();
   });
   
   test('renders loading state', () => {
     render(<UserProfile loading={true} />);
     expect(screen.getByText('Loading...')).toBeInTheDocument();
   });
   

2. 交互测试：

   import { render, screen, fireEvent, waitFor } from '@testing-library/react';
   import userEvent from '@testing-library/user-event';
   
   test('handles button click', async () => {
     const mockOnClick = jest.fn();
     render(<Button onClick={mockOnClick}>Click me</Button>);
     
     await userEvent.click(screen.getByRole('button'));
     expect(mockOnClick).toHaveBeenCalledTimes(1);
   });
   
   test('handles form submission', async () => {
     const mockOnSubmit = jest.fn();
     render(<LoginForm onSubmit={mockOnSubmit} />);
     
     await userEvent.type(screen.getByLabelText('Username'), 'testuser');
     await userEvent.type(screen.getByLabelText('Password'), 'password123');
     await userEvent.click(screen.getByRole('button', { name: 'Login' }));
     
     await waitFor(() => {
       expect(mockOnSubmit).toHaveBeenCalledWith({
         username: 'testuser',
         password: 'password123'
       });
     });
   });
   

3. Hook测试：

   import { renderHook, act } from '@testing-library/react';
   import { useCounter } from './useCounter';
   
   test('should increment counter', () => {
     const { result } = renderHook(() => useCounter());
     
     expect(result.current.count).toBe(0);
     
     act(() => {
       result.current.increment();
     });
     
     expect(result.current.count).toBe(1);
   });
   

Vue组件测试策略：

1. Vue Test Utils使用：

   import { mount } from '@vue/test-utils';
   import UserCard from './UserCard.vue';
   
   test('renders user data', () => {
     const user = { name: 'Jane Doe', age: 30 };
     const wrapper = mount(UserCard, {
       props: { user }
     });
     
     expect(wrapper.text()).toContain('Jane Doe');
     expect(wrapper.text()).toContain('30');
   });
   
   test('emits event on button click', async () => {
     const wrapper = mount(UserCard);
     
     await wrapper.find('button').trigger('click');
     
     expect(wrapper.emitted()).toHaveProperty('user-selected');
     expect(wrapper.emitted('user-selected')).toHaveLength(1);
   });
   

2. Composition API测试：

   import { mount } from '@vue/test-utils';
   import { ref } from 'vue';
   
   test('reactive data updates', async () => {
     const wrapper = mount({
       template: '<div>{{ count }}</div>',
       setup() {
         const count = ref(0);
         return { count };
       }
     });
     
     expect(wrapper.text()).toBe('0');
     
     await wrapper.vm.$nextTick();
     wrapper.vm.count = 5;
     await wrapper.vm.$nextTick();
     
     expect(wrapper.text()).toBe('5');
   });
   

通用测试原则：

1. 测试用户行为而非实现细节
2. 使用语义化查询方式
3. 模拟真实用户交互
4. 测试可访问性属性

测试工具选择：

• React: React Testing Library + Jest
• Vue: Vue Test Utils + Jest
• 跨框架: Playwright Component Testing

最佳实践：

• 优先测试组件的公共API
• 避免测试内部状态和方法
• 使用真实的DOM查询而不是CSS选择器
• 测试错误边界和异常情况

实际应用：

• 表单组件的验证和提交流程
• 列表组件的增删改查操作
• 模态框和弹窗的显示隐藏逻辑
• 路由组件的导航和权限控制

How to test asynchronous code?

考察点：异步测试处理。

答案：

异步代码测试是前端测试的重要组成部分，需要处理Promise、async/await、回调函数、定时器等异步操作。正确的异步测试能确保代码在真实异步环境下的可靠性。

异步测试方法：

1. Promise测试：

   // 测试返回Promise的函数
   function fetchUser(id) {
     return fetch(`/api/users/${id}`).then(res => res.json());
   }
   
   // 方法一：返回Promise
   test('should fetch user data', () => {
     return fetchUser(1).then(user => {
       expect(user.name).toBe('John Doe');
     });
   });
   
   // 方法二：使用resolves/rejects匹配器
   test('should fetch user data', () => {
     return expect(fetchUser(1)).resolves.toEqual({
       id: 1,
       name: 'John Doe'
     });
   });
   
   test('should handle fetch error', () => {
     return expect(fetchUser(999)).rejects.toThrow('User not found');
   });
   

2. async/await测试：

   // 使用async/await语法
   test('should create new user', async () => {
     const userData = { name: 'Jane Doe', email: '[email protected]' };
     const result = await createUser(userData);
     
     expect(result.success).toBe(true);
     expect(result.user.id).toBeDefined();
   });
   
   test('should handle validation error', async () => {
     const invalidData = { name: '', email: 'invalid-email' };
     
     await expect(createUser(invalidData)).rejects.toMatchObject({
       message: 'Validation failed',
       errors: ['Name is required', 'Invalid email format']
     });
   });
   

3. Mock异步操作：

   // Mock fetch API
   global.fetch = jest.fn();
   
   beforeEach(() => {
     fetch.mockClear();
   });
   
   test('should handle successful API response', async () => {
     const mockUser = { id: 1, name: 'John' };
     fetch.mockResolvedValueOnce({
       ok: true,
       json: async () => mockUser
     });
     
     const user = await apiService.getUser(1);
     
     expect(fetch).toHaveBeenCalledWith('/api/users/1');
     expect(user).toEqual(mockUser);
   });
   
   test('should handle API error', async () => {
     fetch.mockRejectedValueOnce(new Error('Network error'));
     
     await expect(apiService.getUser(1)).rejects.toThrow('Network error');
   });
   

4. 定时器测试：

   // 测试使用setTimeout的函数
   function delayedGreeting(callback) {
     setTimeout(() => {
       callback('Hello, World!');
     }, 1000);
   }
   
   test('should call callback after delay', (done) => {
     jest.useFakeTimers();
     
     const mockCallback = jest.fn();
     delayedGreeting(mockCallback);
     
     // 快进时间
     jest.advanceTimersByTime(1000);
     
     expect(mockCallback).toHaveBeenCalledWith('Hello, World!');
     jest.useRealTimers();
     done();
   });
   
   // 使用Promise方式
   test('should resolve after delay', async () => {
     jest.useFakeTimers();
     
     const promise = new Promise(resolve => {
       setTimeout(() => resolve('done'), 2000);
     });
     
     jest.advanceTimersByTime(2000);
     
     await expect(promise).resolves.toBe('done');
     jest.useRealTimers();
   });
   

React组件异步测试：

1. 异步状态更新：

   import { render, screen, waitFor } from '@testing-library/react';
   import userEvent from '@testing-library/user-event';
   
   test('should show loading then data', async () => {
     render(<UserList />);
     
     // 初始加载状态
     expect(screen.getByText('Loading...')).toBeInTheDocument();
     
     // 等待数据加载完成
     await waitFor(() => {
       expect(screen.getByText('John Doe')).toBeInTheDocument();
     });
     
     expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
   });
   

2. 异步用户交互：

   test('should submit form and show success message', async () => {
     const user = userEvent.setup();
     render(<ContactForm />);
     
     await user.type(screen.getByLabelText('Email'), '[email protected]');
     await user.click(screen.getByRole('button', { name: 'Submit' }));
     
     await waitFor(() => {
       expect(screen.getByText('Form submitted successfully!')).toBeInTheDocument();
     });
   });
   

常见陷阱和解决方案：

1. 未等待异步操作完成
2. 忘记Mock异步依赖
3. 定时器未正确处理
4. 内存泄漏（未清理异步操作）

最佳实践：

• 使用waitFor等待异步操作完成
• 合理使用Mock控制异步行为
• 测试加载状态和错误状态
• 避免在测试中使用真实的网络请求

实际应用：

• API调用和数据获取测试
• 表单提交和验证流程测试
• 文件上传和下载功能测试
• 实时数据更新和WebSocket测试

How to implement end-to-end testing and tool selection?

考察点：E2E测试实践。

答案：

端到端测试（E2E Testing）是在真实或近似真实的环境中测试完整的用户流程，验证系统各个组件之间的集成和交互。E2E测试模拟真实用户操作，确保应用在生产环境中正常工作。

主流E2E测试工具对比：

1. Cypress：

   // 用户登录流程测试
   describe('User Login', () => {
     it('should log in successfully', () => {
       cy.visit('/login');
       cy.get('[data-cy=username]').type('testuser');
       cy.get('[data-cy=password]').type('password123');
       cy.get('[data-cy=login-btn]').click();
       
       cy.url().should('include', '/dashboard');
       cy.get('[data-cy=welcome-message]').should('contain', 'Welcome, testuser');
     });
   
     it('should show error for invalid credentials', () => {
       cy.visit('/login');
       cy.get('[data-cy=username]').type('invalid');
       cy.get('[data-cy=password]').type('wrong');
       cy.get('[data-cy=login-btn]').click();
       
       cy.get('[data-cy=error-message]').should('be.visible');
     });
   });
   

2. Playwright：

   import { test, expect } from '@playwright/test';
   
   test('shopping cart flow', async ({ page }) => {
     await page.goto('/products');
     
     // 添加商品到购物车
     await page.click('[data-testid="add-to-cart-1"]');
     await expect(page.locator('.cart-badge')).toHaveText('1');
     
     // 查看购物车
     await page.click('.cart-icon');
     await expect(page.locator('.cart-item')).toBeVisible();
     
     // 结账流程
     await page.click('[data-testid="checkout-btn"]');
     await page.fill('#shipping-address', '123 Test St');
     await page.selectOption('#payment-method', 'credit-card');
     await page.click('[data-testid="place-order"]');
     
     await expect(page.locator('.success-message')).toContainText('Order placed successfully');
   });
   

3. WebDriver (Selenium)：

   import { Builder, By, until } from 'selenium-webdriver';
   
   describe('Search Functionality', () => {
     let driver;
   
     beforeAll(async () => {
       driver = await new Builder().forBrowser('chrome').build();
     });
   
     afterAll(async () => {
       await driver.quit();
     });
   
     test('should search and display results', async () => {
       await driver.get('http://localhost:3000');
       
       const searchBox = await driver.findElement(By.id('search'));
       await searchBox.sendKeys('javascript');
       
       const searchBtn = await driver.findElement(By.css('.search-btn'));
       await searchBtn.click();
       
       await driver.wait(until.elementLocated(By.css('.results')), 5000);
       
       const results = await driver.findElements(By.css('.result-item'));
       expect(results.length).toBeGreaterThan(0);
     });
   });
   

工具选择标准：

E2E测试实现策略：

1. 页面对象模式（Page Object Model）：

   // pages/LoginPage.js
   class LoginPage {
     constructor(page) {
       this.page = page;
       this.usernameInput = '[data-testid="username"]';
       this.passwordInput = '[data-testid="password"]';
       this.loginButton = '[data-testid="login-btn"]';
       this.errorMessage = '[data-testid="error-msg"]';
     }
   
     async login(username, password) {
       await this.page.fill(this.usernameInput, username);
       await this.page.fill(this.passwordInput, password);
       await this.page.click(this.loginButton);
     }
   
     async getErrorMessage() {
       return await this.page.textContent(this.errorMessage);
     }
   }
   
   // 测试中使用
   test('user login', async ({ page }) => {
     const loginPage = new LoginPage(page);
     await page.goto('/login');
     await loginPage.login('testuser', 'password');
     expect(page.url()).toContain('/dashboard');
   });
   

2. 数据驱动测试：

   const testData = [
     { username: 'admin', password: 'admin123', expected: '/admin' },
     { username: 'user', password: 'user123', expected: '/dashboard' },
     { username: 'guest', password: 'guest123', expected: '/home' }
   ];
   
   testData.forEach(({ username, password, expected }) => {
     test(`login as ${username}`, async ({ page }) => {
       await page.goto('/login');
       await page.fill('#username', username);
       await page.fill('#password', password);
       await page.click('#login');
       expect(page.url()).toContain(expected);
     });
   });
   

最佳实践：

1. 测试环境管理：使用独立的测试数据库和环境
2. 稳定的选择器：优先使用data-testid而不是CSS类名
3. 等待策略：合理使用显式等待和隐式等待
4. 并行执行：配置合理的并行度提高执行效率
5. 失败重试：设置重试机制处理偶发性失败

CI/CD集成：

# GitHub Actions示例
- name: Run E2E Tests
  run: |
    npm run build
    npm run start:test &
    npx wait-on http://localhost:3000
    npx playwright test
    kill %1

实际应用场景：

• 用户注册和登录流程验证
• 电商购物和支付流程测试
• 表单提交和数据操作测试
• 跨页面导航和状态保持测试

What is the significance of test coverage and methods to improve it?

考察点：测试质量评估。

答案：

测试覆盖率是衡量代码被测试程度的指标，表示测试用例执行时覆盖的代码比例。虽然高覆盖率不等于高质量测试，但它是评估测试完整性的重要参考指标。

覆盖率类型：

1. 行覆盖率（Line Coverage）：

   // 示例函数
   function calculateDiscount(price, userType) {
     if (price > 100) {           // 行1
       if (userType === 'vip') {  // 行2
         return price * 0.8;      // 行3
       }
       return price * 0.9;        // 行4
     }
     return price;                // 行5
   }
   
   // 测试用例1 - 覆盖行1,4,5
   test('regular user discount', () => {
     expect(calculateDiscount(150, 'regular')).toBe(135);
   });
   
   // 测试用例2 - 覆盖行1,2,3
   test('vip user discount', () => {
     expect(calculateDiscount(150, 'vip')).toBe(120);
   });
   // 行覆盖率：5/5 = 100%
   

2. 分支覆盖率（Branch Coverage）：

   // 需要测试所有if条件的true/false分支
   describe('calculateDiscount', () => {
     test('price <= 100', () => {
       expect(calculateDiscount(50, 'regular')).toBe(50);
     });
     
     test('price > 100 and userType !== vip', () => {
       expect(calculateDiscount(150, 'regular')).toBe(135);
     });
     
     test('price > 100 and userType === vip', () => {
       expect(calculateDiscount(150, 'vip')).toBe(120);
     });
   });
   // 分支覆盖率：测试了所有条件分支
   

3. 函数覆盖率（Function Coverage）：

   // 确保每个函数都被调用
   export const utils = {
     add: (a, b) => a + b,
     subtract: (a, b) => a - b,
     multiply: (a, b) => a * b,
     divide: (a, b) => a / b
   };
   
   // 需要测试所有函数
   describe('utils', () => {
     test('add function', () => {
       expect(utils.add(2, 3)).toBe(5);
     });
     // ... 其他函数测试
   });
   

覆盖率工具配置：

1. Jest配置：

   // jest.config.js
   module.exports = {
     collectCoverage: true,
     collectCoverageFrom: [
       'src/**/*.{js,jsx,ts,tsx}',
       '!src/index.js',
       '!src/serviceWorker.js',
       '!src/**/*.test.{js,jsx,ts,tsx}'
     ],
     coverageThreshold: {
       global: {
         branches: 80,
         functions: 80,
         lines: 80,
         statements: 80
       },
       './src/utils/': {
         branches: 90,
         functions: 90,
         lines: 90,
         statements: 90
       }
     },
     coverageReporters: ['text', 'html', 'lcov']
   };
   

2. NYC (Istanbul) 配置：

   {
     "nyc": {
       "include": ["src/**/*.js"],
       "exclude": ["**/*.test.js", "**/*.spec.js"],
       "reporter": ["text", "html", "json"],
       "check-coverage": true,
       "lines": 80,
       "functions": 80,
       "branches": 80,
       "statements": 80
     }
   }
   

覆盖率提升方法：

1. 识别未覆盖代码：

   # 生成覆盖率报告
   npm test -- --coverage --watchAll=false
   
   # 查看详细报告
   open coverage/lcov-report/index.html
   

2. 针对性补充测试：

   // 未覆盖的错误处理分支
   function parseJSON(str) {
     try {
       return JSON.parse(str);
     } catch (error) {
       // 这个分支可能未被测试覆盖
       console.error('Invalid JSON:', error);
       return null;
     }
   }
   
   // 补充错误情况测试
   test('should handle invalid JSON', () => {
     const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
     
     const result = parseJSON('invalid json');
     
     expect(result).toBeNull();
     expect(consoleSpy).toHaveBeenCalledWith('Invalid JSON:', expect.any(Error));
     
     consoleSpy.mockRestore();
   });
   

3. 边界条件测试：

   // 测试边界值和异常情况
   describe('array utils', () => {
     test('empty array', () => {
       expect(getAverage([])).toBeNaN();
     });
     
     test('single element', () => {
       expect(getAverage([5])).toBe(5);
     });
     
     test('negative numbers', () => {
       expect(getAverage([-1, -2, -3])).toBe(-2);
     });
   });
   

覆盖率最佳实践：

1. 设定合理目标：一般80-90%为宜，不必追求100%
2. 关注质量而非数量：重要业务逻辑应达到更高覆盖率
3. 排除特定文件：配置文件、常量定义等可以排除
4. 持续监控：集成到CI/CD流程中

CI/CD集成示例：

# .github/workflows/test.yml
- name: Run tests with coverage
  run: npm test -- --coverage --watchAll=false

- name: Upload coverage to Codecov
  uses: codecov/codecov-action@v1
  with:
    file: ./coverage/lcov.info

- name: Check coverage threshold
  run: |
    if [ $(jq '.total.lines.pct' coverage/coverage-summary.json | cut -d. -f1) -lt 80 ]; then
      echo "Coverage below threshold"
      exit 1
    fi

实际应用：

• 项目质量监控和代码评审依据
• 重构时确保测试覆盖完整性
• 新功能开发的测试要求制定
• 技术债务识别和改进计划制定

How to integrate testing in CI/CD?

考察点：测试自动化集成。

答案：

CI/CD中的测试集成是现代软件开发的核心实践，通过自动化测试流程确保代码质量、减少人工错误、提高部署效率。测试应该贯穿整个开发生命周期，从代码提交到生产部署。

CI/CD测试流程设计：

1. 多阶段测试策略：

   # GitHub Actions示例
   name: CI/CD Pipeline
   
   on:
     push:
       branches: [ main, develop ]
     pull_request:
       branches: [ main ]
   
   jobs:
     # 阶段1：代码质量检查
     lint-and-format:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v3
         - name: Setup Node.js
           uses: actions/setup-node@v3
           with:
             node-version: '18'
             cache: 'npm'
         
         - name: Install dependencies
           run: npm ci
         
         - name: Run ESLint
           run: npm run lint
         
         - name: Check formatting
           run: npm run format:check
   
     # 阶段2：单元测试
     unit-tests:
       runs-on: ubuntu-latest
       needs: lint-and-format
       steps:
         - uses: actions/checkout@v3
         - name: Setup Node.js
           uses: actions/setup-node@v3
           with:
             node-version: '18'
             cache: 'npm'
         
         - name: Install dependencies
           run: npm ci
         
         - name: Run unit tests
           run: npm test -- --coverage --watchAll=false
         
         - name: Upload coverage
           uses: codecov/codecov-action@v3
   
     # 阶段3：集成测试
     integration-tests:
       runs-on: ubuntu-latest
       needs: unit-tests
       services:
         postgres:
           image: postgres:13
           env:
             POSTGRES_PASSWORD: postgres
           options: >-
             --health-cmd pg_isready
             --health-interval 10s
             --health-timeout 5s
             --health-retries 5
       steps:
         - uses: actions/checkout@v3
         - name: Setup Node.js
           uses: actions/setup-node@v3
           with:
             node-version: '18'
             cache: 'npm'
         
         - name: Install dependencies
           run: npm ci
         
         - name: Run integration tests
           run: npm run test:integration
           env:
             DATABASE_URL: postgresql://postgres:postgres@localhost:5432/testdb
   
     # 阶段4：E2E测试
     e2e-tests:
       runs-on: ubuntu-latest
       needs: integration-tests
       steps:
         - uses: actions/checkout@v3
         - name: Setup Node.js
           uses: actions/setup-node@v3
           with:
             node-version: '18'
             cache: 'npm'
         
         - name: Install dependencies
           run: npm ci
         
         - name: Build application
           run: npm run build
         
         - name: Start application
           run: npm start &
         
         - name: Wait for application
           run: npx wait-on http://localhost:3000
         
         - name: Run Playwright tests
           run: npx playwright test
         
         - name: Upload test results
           uses: actions/upload-artifact@v3
           if: failure()
           with:
             name: playwright-report
             path: playwright-report/
   

2. Jenkins Pipeline示例：

   pipeline {
     agent any
     
     stages {
       stage('Checkout') {
         steps {
           git branch: 'main', url: 'https://github.com/your-repo.git'
         }
       }
       
       stage('Install Dependencies') {
         steps {
           sh 'npm ci'
         }
       }
       
       stage('Code Quality') {
         parallel {
           stage('Lint') {
             steps {
               sh 'npm run lint'
             }
           }
           stage('Security Audit') {
             steps {
               sh 'npm audit --audit-level moderate'
             }
           }
         }
       }
       
       stage('Tests') {
         parallel {
           stage('Unit Tests') {
             steps {
               sh 'npm test -- --coverage'
               publishHTML([
                 allowMissing: false,
                 alwaysLinkToLastBuild: true,
                 keepAll: true,
                 reportDir: 'coverage/lcov-report',
                 reportFiles: 'index.html',
                 reportName: 'Coverage Report'
               ])
             }
           }
           stage('Integration Tests') {
             steps {
               sh 'npm run test:integration'
             }
           }
         }
       }
       
       stage('E2E Tests') {
         steps {
           sh 'npm run build'
           sh 'npm start &'
           sh 'npx wait-on http://localhost:3000'
           sh 'npm run test:e2e'
         }
         post {
           always {
             archiveArtifacts artifacts: 'test-results/**/*', allowEmptyArchive: true
           }
         }
       }
       
       stage('Deploy to Staging') {
         when {
           branch 'develop'
         }
         steps {
           sh 'npm run deploy:staging'
         }
       }
       
       stage('Deploy to Production') {
         when {
           branch 'main'
         }
         steps {
           input message: 'Deploy to production?'
           sh 'npm run deploy:prod'
         }
       }
     }
     
     post {
       always {
         publishTestResults testResultsPattern: 'test-results/*.xml'
         cleanWs()
       }
       failure {
         emailext (
           subject: "Build Failed: ${env.JOB_NAME} - ${env.BUILD_NUMBER}",
           body: "Build failed. Check console output at ${env.BUILD_URL}",
           to: "${env.CHANGE_AUTHOR_EMAIL}"
         )
       }
     }
   }
   

测试环境管理：

1. Docker化测试环境：

   # Dockerfile.test
   FROM node:18-alpine
   
   WORKDIR /app
   
   COPY package*.json ./
   RUN npm ci --only=production
   
   COPY . .
   
   # Install test dependencies
   RUN npm ci
   
   CMD ["npm", "test"]
   

2. 测试数据管理：

   // setup/testDb.js
   import { Pool } from 'pg';
   
   export async function setupTestDb() {
     const pool = new Pool({
       connectionString: process.env.TEST_DATABASE_URL
     });
     
     // 创建测试数据
     await pool.query(`
       INSERT INTO users (email, name) VALUES 
       ('[email protected]', 'Test User'),
       ('[email protected]', 'Admin User');
     `);
     
     return pool;
   }
   
   export async function cleanupTestDb(pool) {
     await pool.query('TRUNCATE TABLE users CASCADE');
     await pool.end();
   }
   

质量门禁设置：

1. 代码覆盖率要求：

   // jest.config.js
   module.exports = {
     coverageThreshold: {
       global: {
         branches: 80,
         functions: 80,
         lines: 80,
         statements: 80
       }
     }
   };
   

2. 测试通过率要求：

   # 设置失败条件
   - name: Check test results
     run: |
       if [ ${{ steps.tests.outcome }} != 'success' ]; then
         echo "Tests failed, blocking deployment"
         exit 1
       fi
   

监控和报告：

1. 测试结果收集：

   // 测试报告器配置
   module.exports = {
     reporters: [
       'default',
       ['jest-junit', { 
         outputDirectory: 'test-results',
         outputName: 'junit.xml'
       }],
       ['jest-html-reporter', {
         pageTitle: 'Test Report',
         outputPath: 'test-results/test-report.html'
       }]
     ]
   };
   

2. Slack通知集成：

   - name: Notify Slack
     if: always()
     uses: 8398a7/action-slack@v3
     with:
       status: ${{ job.status }}
       fields: repo,message,commit,author,action,eventName,ref,workflow
     env:
       SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK }}
   

最佳实践：

1. 快速反馈：单元测试应在5分钟内完成
2. 并行执行：合理利用CI资源进行并行测试
3. 缓存优化：缓存依赖项和构建产物
4. 环境一致性：使用容器化保证环境一致

实际应用场景：

• 多环境部署流程（开发→测试→预生产→生产）
• 热修复快速验证和部署
• 微服务架构的集成测试协调
• 移动应用的多平台自动化测试

How to design testing architecture for large applications?

考察点：测试架构思维。

答案：

大型应用的测试架构需要考虑系统复杂性、团队协作、性能要求和维护成本等多个维度。好的测试架构应该具备可扩展性、可维护性、高效性和可靠性，支持快速迭代和持续交付。

测试架构分层设计：

1. 测试金字塔架构：

   ┌─────────────────┐
   │   E2E Tests     │  5-10%  关键用户路径
   │    (Slow)       │
   ├─────────────────┤
   │ Integration     │  15-25% 服务间交互
   │   Tests         │
   ├─────────────────┤
   │  Unit Tests     │  65-80% 业务逻辑验证
   │   (Fast)        │
   └─────────────────┘
   

2. 微前端测试架构：

   // 主应用测试配置
   // apps/shell/jest.config.js
   module.exports = {
     projects: [
       '<rootDir>/packages/*/jest.config.js',
       {
         displayName: 'integration',
         testMatch: ['<rootDir>/tests/integration/**/*.test.js']
       }
     ],
     coverageDirectory: '<rootDir>/coverage',
     collectCoverageFrom: [
       'packages/*/src/**/*.{js,jsx,ts,tsx}',
       '!packages/*/src/**/*.test.{js,jsx,ts,tsx}'
     ]
   };
   
   // 子应用测试隔离
   // packages/user-management/jest.config.js
   module.exports = {
     displayName: 'user-management',
     testEnvironment: 'jsdom',
     setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
     moduleNameMapping: {
       '@shared/(.*)': '<rootDir>/../../shared/src/$1'
     }
   };
   

分层测试策略：

1. 单元测试层：

   // 业务逻辑单元测试
   // src/services/userService.test.js
   describe('UserService', () => {
     let userService;
     let mockApiClient;
     
     beforeEach(() => {
       mockApiClient = {
         get: jest.fn(),
         post: jest.fn(),
         put: jest.fn(),
         delete: jest.fn()
       };
       userService = new UserService(mockApiClient);
     });
     
     describe('getUserById', () => {
       test('should return user data', async () => {
         const mockUser = { id: 1, name: 'John Doe' };
         mockApiClient.get.mockResolvedValue({ data: mockUser });
         
         const result = await userService.getUserById(1);
         
         expect(result).toEqual(mockUser);
         expect(mockApiClient.get).toHaveBeenCalledWith('/users/1');
       });
       
       test('should handle user not found', async () => {
         mockApiClient.get.mockRejectedValue(new Error('User not found'));
         
         await expect(userService.getUserById(999))
           .rejects.toThrow('User not found');
       });
     });
   });
   

2. 集成测试层：

   // API集成测试
   // tests/integration/api.test.js
   import { setupTestDb, teardownTestDb } from '../helpers/database';
   import { createTestServer } from '../helpers/server';
   import supertest from 'supertest';
   
   describe('User API Integration', () => {
     let app;
     let request;
     let db;
     
     beforeAll(async () => {
       db = await setupTestDb();
       app = createTestServer(db);
       request = supertest(app);
     });
     
     afterAll(async () => {
       await teardownTestDb(db);
     });
     
     beforeEach(async () => {
       await db.query('TRUNCATE users CASCADE');
     });
     
     test('should create and retrieve user', async () => {
       // 创建用户
       const userData = { name: 'John Doe', email: '[email protected]' };
       const createResponse = await request
         .post('/api/users')
         .send(userData)
         .expect(201);
       
       const userId = createResponse.body.id;
       
       // 获取用户
       const getResponse = await request
         .get(`/api/users/${userId}`)
         .expect(200);
       
       expect(getResponse.body).toMatchObject(userData);
     });
   });
   

3. E2E测试层：

   // 关键业务流程测试
   // e2e/user-journey.spec.js
   import { test, expect } from '@playwright/test';
   
   test.describe('User Complete Journey', () => {
     test('complete user onboarding flow', async ({ page, context }) => {
       // 设置测试数据
       await context.addCookies([
         { name: 'test-mode', value: 'true', domain: 'localhost' }
       ]);
       
       // 注册流程
       await page.goto('/register');
       await page.fill('[data-testid="email"]', '[email protected]');
       await page.fill('[data-testid="password"]', 'SecurePass123!');
       await page.click('[data-testid="register-btn"]');
       
       // 邮箱验证（Mock）
       await expect(page.locator('.success-message')).toContainText('Please check your email');
       
       // 模拟邮箱验证
       await page.goto('/verify?token=mock-verification-token');
       await expect(page.locator('.verification-success')).toBeVisible();
       
       // 完成个人资料
       await page.goto('/profile/setup');
       await page.fill('[data-testid="first-name"]', 'John');
       await page.fill('[data-testid="last-name"]', 'Doe');
       await page.selectOption('[data-testid="country"]', 'US');
       await page.click('[data-testid="save-profile"]');
       
       // 验证完成状态
       await expect(page.locator('.profile-complete')).toBeVisible();
       await expect(page.url()).toContain('/dashboard');
     });
   });
   

测试工具和框架选择：

1. 测试框架矩阵：

   // 测试配置管理
   // config/test-config.js
   const testConfig = {
     unit: {
       framework: 'jest',
       environment: 'jsdom',
       setupFiles: ['<rootDir>/src/setupTests.js'],
       testMatch: ['**/__tests__/**/*.test.{js,ts,jsx,tsx}']
     },
     integration: {
       framework: 'jest',
       environment: 'node',
       testMatch: ['**/integration/**/*.test.{js,ts}'],
       globalSetup: '<rootDir>/tests/integration/setup.js',
       globalTeardown: '<rootDir>/tests/integration/teardown.js'
     },
     e2e: {
       framework: 'playwright',
       projects: [
         { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
         { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
         { name: 'webkit', use: { ...devices['Desktop Safari'] } },
         { name: 'mobile', use: { ...devices['iPhone 12'] } }
       ]
     }
   };
   

2. 测试数据管理：

   // 测试数据工厂
   // tests/factories/userFactory.js
   import { faker } from '@faker-js/faker';
   
   export class UserFactory {
     static create(overrides = {}) {
       return {
         id: faker.datatype.uuid(),
         email: faker.internet.email(),
         firstName: faker.name.firstName(),
         lastName: faker.name.lastName(),
         createdAt: faker.date.past(),
         ...overrides
       };
     }
     
     static createMany(count = 5, overrides = {}) {
       return Array.from({ length: count }, () => this.create(overrides));
     }
   }
   
   // 使用示例
   test('should handle multiple users', () => {
     const users = UserFactory.createMany(10, { role: 'admin' });
     // 测试逻辑
   });
   

性能和扩展性考虑：

1. 并行测试执行：

   // Jest并行配置
   module.exports = {
     maxWorkers: '50%',
     testPathIgnorePatterns: ['/node_modules/', '/build/'],
     setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
     transform: {
       '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest'
     }
   };
   

2. 测试结果缓存：

   # CI缓存策略
   - name: Cache test results
     uses: actions/cache@v3
     with:
       path: |
         ~/.cache/jest
         node_modules/.cache
       key: ${{ runner.os }}-test-${{ hashFiles('**/package-lock.json') }}
   

监控和度量：

1. 测试质量度量：

   • 测试覆盖率趋势
   • 测试执行时间监控
   • 失败测试分析和分类
   • 测试稳定性评估

2. 团队协作工具：

   • 测试报告仪表板
   • 失败测试自动分配
   • 测试债务跟踪
   • 知识库和最佳实践文档

实际应用场景：

• 电商平台的多业务域测试协调
• 金融系统的安全和合规测试
• SaaS产品的多租户测试隔离
• 企业级应用的性能和负载测试

What are the practices of Test-Driven Development (TDD)?

考察点：TDD开发模式。

答案：

测试驱动开发（TDD）是一种软件开发方法论，强调先编写测试用例，再编写实现代码。TDD遵循"红-绿-重构"循环，有助于提高代码质量、设计清晰度和开发信心。

TDD核心原则：

1. 红-绿-重构循环：

   🔴 RED: 编写失败测试
        ↓
   🟢 GREEN: 编写最少代码使测试通过  
        ↓
   🔵 REFACTOR: 重构改进代码质量
        ↓
   回到 RED...
   

2. 三定律：

   • 在编写一个失败的单元测试前，不可编写生产代码
   • 只可编写刚好无法通过的单元测试，不能编译也算无法通过
   • 只可编写刚好足以通过当前失败测试的生产代码

TDD实践示例：

1. 函数级TDD实现：

   // 需求：实现一个计算器类
   
   // 第一轮：RED - 编写失败测试
   describe('Calculator', () => {
     test('should add two numbers', () => {
       const calc = new Calculator();
       expect(calc.add(2, 3)).toBe(5);
     });
   });
   // 运行测试 -> 失败（Calculator不存在）
   
   // GREEN - 编写最少代码
   class Calculator {
     add(a, b) {
       return 5; // 硬编码让测试通过
     }
   }
   // 运行测试 -> 通过
   
   // 第二轮：RED - 添加更多测试
   test('should add different numbers', () => {
     const calc = new Calculator();
     expect(calc.add(1, 1)).toBe(2);
     expect(calc.add(0, 5)).toBe(5);
   });
   // 运行测试 -> 失败（硬编码5不适用）
   
   // GREEN - 实现真正逻辑
   class Calculator {
     add(a, b) {
       return a + b;
     }
   }
   // 运行测试 -> 通过
   
   // REFACTOR - 重构（如果需要）
   // 代码已经足够简洁，无需重构
   

2. React组件TDD开发：

   // 需求：开发用户卡片组件
   
   // 第一轮：RED
   import { render, screen } from '@testing-library/react';
   import UserCard from './UserCard';
   
   describe('UserCard', () => {
     test('should display user name', () => {
       const user = { name: 'John Doe', email: '[email protected]' };
       render(<UserCard user={user} />);
       expect(screen.getByText('John Doe')).toBeInTheDocument();
     });
   });
   // 测试失败 - UserCard组件不存在
   
   // GREEN - 最小实现
   function UserCard({ user }) {
     return <div>{user.name}</div>;
   }
   export default UserCard;
   // 测试通过
   
   // 第二轮：RED - 添加邮箱显示
   test('should display user email', () => {
     const user = { name: 'John Doe', email: '[email protected]' };
     render(<UserCard user={user} />);
     expect(screen.getByText('[email protected]')).toBeInTheDocument();
   });
   // 测试失败 - 没有显示邮箱
   
   // GREEN - 添加邮箱显示
   function UserCard({ user }) {
     return (
       <div>
         <h3>{user.name}</h3>
         <p>{user.email}</p>
       </div>
     );
   }
   // 测试通过
   
   // 第三轮：RED - 添加点击事件
   test('should call onSelect when clicked', () => {
     const user = { name: 'John Doe', email: '[email protected]' };
     const mockOnSelect = jest.fn();
     
     render(<UserCard user={user} onSelect={mockOnSelect} />);
     fireEvent.click(screen.getByRole('button'));
     
     expect(mockOnSelect).toHaveBeenCalledWith(user);
   });
   // 测试失败 - 没有按钮和点击处理
   
   // GREEN - 添加交互功能
   function UserCard({ user, onSelect }) {
     return (
       <button onClick={() => onSelect(user)}>
         <h3>{user.name}</h3>
         <p>{user.email}</p>
       </button>
     );
   }
   
   // REFACTOR - 重构改进
   function UserCard({ user, onSelect }) {
     const handleClick = useCallback(() => {
       onSelect?.(user);
     }, [user, onSelect]);
     
     return (
       <button 
         className="user-card" 
         onClick={handleClick}
         aria-label={`Select user ${user.name}`}
       >
         <h3 className="user-name">{user.name}</h3>
         <p className="user-email">{user.email}</p>
       </button>
     );
   }
   

3. API服务TDD开发：

   // 需求：开发用户服务API
   
   // 第一轮：RED
   describe('UserService', () => {
     test('should fetch user by id', async () => {
       const mockApiClient = {
         get: jest.fn().mockResolvedValue({ 
           data: { id: 1, name: 'John Doe' } 
         })
       };
       
       const userService = new UserService(mockApiClient);
       const user = await userService.getUser(1);
       
       expect(user).toEqual({ id: 1, name: 'John Doe' });
       expect(mockApiClient.get).toHaveBeenCalledWith('/users/1');
     });
   });
   // 测试失败 - UserService不存在
   
   // GREEN - 最小实现
   class UserService {
     constructor(apiClient) {
       this.apiClient = apiClient;
     }
     
     async getUser(id) {
       const response = await this.apiClient.get(`/users/${id}`);
       return response.data;
     }
   }
   // 测试通过
   
   // 第二轮：RED - 错误处理
   test('should handle user not found error', async () => {
     const mockApiClient = {
       get: jest.fn().mockRejectedValue(new Error('User not found'))
     };
     
     const userService = new UserService(mockApiClient);
     
     await expect(userService.getUser(999))
       .rejects.toThrow('User not found');
   });
   // 测试通过（错误会自动传播）
   
   // 第三轮：RED - 数据缓存
   test('should cache user data', async () => {
     const mockUser = { id: 1, name: 'John Doe' };
     const mockApiClient = {
       get: jest.fn().mockResolvedValue({ data: mockUser })
     };
     
     const userService = new UserService(mockApiClient);
     
     await userService.getUser(1);
     await userService.getUser(1); // 第二次调用
     
     expect(mockApiClient.get).toHaveBeenCalledTimes(1); // 只调用一次
   });
   // 测试失败 - 没有缓存机制
   
   // GREEN - 添加缓存
   class UserService {
     constructor(apiClient) {
       this.apiClient = apiClient;
       this.cache = new Map();
     }
     
     async getUser(id) {
       if (this.cache.has(id)) {
         return this.cache.get(id);
       }
       
       const response = await this.apiClient.get(`/users/${id}`);
       const user = response.data;
       this.cache.set(id, user);
       return user;
     }
   }
   
   // REFACTOR - 添加缓存过期和清理
   class UserService {
     constructor(apiClient, cacheTimeout = 5 * 60 * 1000) {
       this.apiClient = apiClient;
       this.cache = new Map();
       this.cacheTimeout = cacheTimeout;
     }
     
     async getUser(id) {
       const cached = this.cache.get(id);
       if (cached && Date.now() - cached.timestamp < this.cacheTimeout) {
         return cached.data;
       }
       
       const response = await this.apiClient.get(`/users/${id}`);
       const user = response.data;
       
       this.cache.set(id, {
         data: user,
         timestamp: Date.now()
       });
       
       return user;
     }
   }
   

TDD最佳实践：

1. 测试优先思维：

   • 从用户需求出发设计测试用例
   • 关注接口设计而非实现细节
   • 保持测试简单和专注

2. 小步迭代：

   • 每次只关注一个测试用例
   • 编写最少代码让测试通过
   • 频繁运行测试获得快速反馈

3. 持续重构：

   • 绿色状态下进行重构
   • 保持代码简洁和可读性
   • 消除重复代码

TDD的优势：

• 更好的代码设计：促进模块化和解耦
• 更高的测试覆盖率：确保每行代码都有测试
• 更少的调试时间：问题能够快速定位
• 更强的重构信心：测试提供安全保障

实际应用场景：

• 复杂业务逻辑的逐步构建
• API接口的设计和实现
• 算法和数据结构的开发
• 核心组件库的构建

How to implement performance testing and security testing?

考察点：专项测试能力。

答案：

性能测试和安全测试是保障应用质量的重要组成部分。性能测试确保系统在各种负载条件下的响应能力，安全测试识别和预防潜在的安全威胁，两者都需要专门的工具、方法和持续监控。

性能测试实现：

1. 前端性能测试：

   // Lighthouse性能测试
   import lighthouse from 'lighthouse';
   import * as chromeLauncher from 'chrome-launcher';
   
   describe('Performance Tests', () => {
     test('should meet performance benchmarks', async () => {
       const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
       
       const options = {
         logLevel: 'info',
         output: 'json',
         onlyCategories: ['performance'],
         port: chrome.port
       };
       
       const runnerResult = await lighthouse('http://localhost:3000', options);
       const { lhr } = runnerResult;
       
       // 性能指标断言
       expect(lhr.categories.performance.score).toBeGreaterThan(0.9);
       expect(lhr.audits['first-contentful-paint'].numericValue).toBeLessThan(1500);
       expect(lhr.audits['largest-contentful-paint'].numericValue).toBeLessThan(2500);
       expect(lhr.audits['cumulative-layout-shift'].numericValue).toBeLessThan(0.1);
       
       await chrome.kill();
     });
   });
   
   // Web Vitals监控
   import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';
   
   function setupPerformanceMonitoring() {
     getCLS(console.log);
     getFID(console.log);
     getFCP(console.log);
     getLCP(console.log);
     getTTFB(console.log);
   }
   
   // 性能预算测试
   test('should stay within performance budget', async () => {
     const performanceObserver = new PerformanceObserver((list) => {
       const entries = list.getEntries();
       entries.forEach((entry) => {
         if (entry.entryType === 'navigation') {
           expect(entry.loadEventEnd - entry.navigationStart).toBeLessThan(3000);
         }
       });
     });
     
     performanceObserver.observe({ entryTypes: ['navigation'] });
   });
   

2. 负载测试：

   // 使用k6进行负载测试
   // load-test.js
   import http from 'k6/http';
   import { check, sleep } from 'k6';
   import { Rate } from 'k6/metrics';
   
   const errorRate = new Rate('errors');
   
   export let options = {
     stages: [
       { duration: '2m', target: 10 },   // 预热阶段
       { duration: '5m', target: 10 },   // 稳定阶段
       { duration: '2m', target: 20 },   // 增压阶段
       { duration: '5m', target: 20 },   // 高负载阶段
       { duration: '2m', target: 0 },    // 降压阶段
     ],
     thresholds: {
       http_req_duration: ['p(99)<1500'], // 99%请求在1.5秒内
       http_req_failed: ['rate<0.1'],     // 错误率小于10%
       errors: ['rate<0.1'],
     },
   };
   
   export default function() {
     const response = http.get('http://localhost:3000/api/users');
     
     check(response, {
       'status is 200': (r) => r.status === 200,
       'response time < 500ms': (r) => r.timings.duration < 500,
     }) || errorRate.add(1);
     
     sleep(1);
   }
   

3. 内存泄漏测试：

   // 内存使用监控
   describe('Memory Leak Tests', () => {
     test('should not have memory leaks', async () => {
       const page = await browser.newPage();
       
       // 监控内存使用
       const initialMemory = await page.evaluate(() => performance.memory.usedJSHeapSize);
       
       // 执行操作循环
       for (let i = 0; i < 100; i++) {
         await page.click('[data-testid="create-item"]');
         await page.click('[data-testid="delete-item"]');
       }
       
       // 强制垃圾回收
       await page.evaluate(() => {
         if (window.gc) window.gc();
       });
       
       const finalMemory = await page.evaluate(() => performance.memory.usedJSHeapSize);
       const memoryIncrease = finalMemory - initialMemory;
       
       // 内存增长不应超过10MB
       expect(memoryIncrease).toBeLessThan(10 * 1024 * 1024);
       
       await page.close();
     });
   });
   

安全测试实现：

1. 输入验证测试：

   // XSS攻击测试
   describe('XSS Security Tests', () => {
     const xssPayloads = [
       '<script>alert("XSS")</script>',
       '"><script>alert("XSS")</script>',
       'javascript:alert("XSS")',
       '<img src=x onerror=alert("XSS")>',
       '<svg onload=alert("XSS")>'
     ];
     
     xssPayloads.forEach(payload => {
       test(`should sanitize XSS payload: ${payload}`, async () => {
         const { page } = await setupTest();
         
         await page.fill('[data-testid="comment-input"]', payload);
         await page.click('[data-testid="submit-comment"]');
         
         // 检查输出是否被正确转义
         const commentText = await page.textContent('.comment-content');
         expect(commentText).not.toContain('<script>');
         expect(commentText).not.toContain('javascript:');
         
         // 检查DOM中是否存在恶意脚本
         const scripts = await page.$$eval('script', scripts => 
           scripts.some(script => script.textContent.includes('alert'))
         );
         expect(scripts).toBe(false);
       });
     });
   });
   
   // SQL注入测试
   describe('SQL Injection Tests', () => {
     const sqlPayloads = [
       "'; DROP TABLE users; --",
       "' OR '1'='1",
       "' UNION SELECT * FROM users --",
       "1' OR 1=1#"
     ];
     
     sqlPayloads.forEach(payload => {
       test(`should prevent SQL injection: ${payload}`, async () => {
         const response = await request(app)
           .get('/api/users')
           .query({ id: payload })
           .expect(400); // 应该返回错误而不是执行恶意SQL
         
         expect(response.body.error).toContain('Invalid input');
       });
     });
   });
   

2. 认证授权测试：

   // 权限控制测试
   describe('Authorization Tests', () => {
     test('should deny access without token', async () => {
       const response = await request(app)
         .get('/api/admin/users')
         .expect(401);
       
       expect(response.body.error).toContain('Unauthorized');
     });
     
     test('should deny access with invalid token', async () => {
       const response = await request(app)
         .get('/api/admin/users')
         .set('Authorization', 'Bearer invalid-token')
         .expect(401);
     });
     
     test('should deny access with expired token', async () => {
       const expiredToken = jwt.sign(
         { userId: 1, role: 'admin' },
         process.env.JWT_SECRET,
         { expiresIn: '-1h' } // 过期令牌
       );
       
       const response = await request(app)
         .get('/api/admin/users')
         .set('Authorization', `Bearer ${expiredToken}`)
         .expect(401);
     });
     
     test('should deny access with insufficient privileges', async () => {
       const userToken = jwt.sign(
         { userId: 2, role: 'user' },
         process.env.JWT_SECRET,
         { expiresIn: '1h' }
       );
       
       const response = await request(app)
         .get('/api/admin/users')
         .set('Authorization', `Bearer ${userToken}`)
         .expect(403);
     });
   });
   

3. 数据安全测试：

   // 敏感数据泄露测试
   describe('Data Security Tests', () => {
     test('should not expose sensitive data in API response', async () => {
       const response = await request(app)
         .get('/api/users/1')
         .set('Authorization', `Bearer ${validToken}`)
         .expect(200);
       
       // 检查响应中不包含敏感字段
       expect(response.body).not.toHaveProperty('password');
       expect(response.body).not.toHaveProperty('ssn');
       expect(response.body).not.toHaveProperty('creditCard');
     });
     
     test('should encrypt sensitive data in database', async () => {
       const user = await User.findById(1);
       
       // 检查敏感字段是否加密存储
       expect(user.password).toMatch(/^\$2[aby]\$\d+\$/); // bcrypt格式
       expect(user.ssn).not.toMatch(/^\d{3}-\d{2}-\d{4}$/); // 不是明文SSN格式
     });
   });
   
   // CSRF保护测试
   test('should prevent CSRF attacks', async () => {
     // 不携带CSRF令牌的请求应被拒绝
     const response = await request(app)
       .post('/api/users/1/delete')
       .set('Authorization', `Bearer ${validToken}`)
       .expect(403);
     
     expect(response.body.error).toContain('CSRF token missing');
   });
   

自动化安全扫描：

1. 依赖漏洞扫描：

   # npm audit
   npm audit --audit-level high
   
   # Snyk扫描
   npx snyk test
   npx snyk monitor
   
   # OWASP Dependency Check
   dependency-check --project myapp --scan ./
   

2. CI/CD集成：

   # GitHub Actions安全扫描
   security-scan:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
       
       - name: Run Snyk security scan
         uses: snyk/actions/node@master
         env:
           SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
         
       - name: Run OWASP ZAP scan
         uses: zaproxy/[email protected]
         with:
           target: 'http://localhost:3000'
   

监控和报告：

1. 性能监控仪表板
2. 安全事件日志分析
3. 自动化告警机制
4. 定期安全审计报告

实际应用场景：

• 电商网站的支付安全和性能优化
• 金融应用的数据保护和系统稳定性
• 社交平台的用户数据安全和高并发处理
• 企业系统的访问控制和性能基准测试

测试是软件质量的重要保障，需要结合项目特点选择合适的测试策略和工具。