前端——前端核心技术要点深度解析 之 【前端测试体系构建】

前端测试包括单元测试、集成测试和端到端测试三个层次，各有侧重。

重点难点：

1. 测试金字塔：单元测试、集成测试、端到端测试的比例分配
2. Mock 策略：如何恰当地模拟依赖项
3. 测试覆盖率：有意义的覆盖率指标设定

// 单元测试示例 (Jest)describe('Calculator',()=>{beforeEach(()=>{// 测试前准备})afterEach(()=>{// 测试后清理})test('should add two positive numbers correctly',()=>{expect(add(2,3)).toBe(5)})test('should handle negative numbers',()=>{expect(add(-1,1)).toBe(0)})test('should throw error for invalid inputs',()=>{expect(()=>add('a','b')).toThrow('Invalid input')})})// 组件测试示例 (Vue Test Utils)import{mount}from'@vue/test-utils'importButtonfrom'@/components/Button.vue'describe('Button',()=>{test('renders correctly with props',()=>{constwrapper=mount(Button,{props:{type:'primary',disabled:false},slots:{default:'Click me'}})expect(wrapper.text()).toContain('Click me')expect(wrapper.classes()).toContain('btn-primary')expect(wrapper.attributes('disabled')).toBeUndefined()})test('emits click event when clicked',async()=>{constwrapper=mount(Button)awaitwrapper.trigger('click')expect(wrapper.emitted('click')).toHaveLength(1)})})