来源：稀土掘金
前端单元测试和端到端（E2E）测试是确保Web应用质量的关键组成部分。
前端单元测试
前端单元测试主要关注代码的最小可测试单元，如函数、组件等，确保它们按预期工作。常用的测试框架有Jest（React推荐）、Mocha（Vue和Angular中常用）、Jasmine等。
Jest示例（React）：
安装Jest和React Testing Library：
npm install --save-dev jest @testing-library/react测试React组件：
// Button.test.jsimport React from 'react';import { render, fireEvent } from '@testing-library/react';import Button from './Button';test('renders button with correct text', () => {const { getByText } = render(<Button label="Click me" />);const linkElement = getByText(/Click me/);expect(linkElement).toBeInTheDocument();});test('calls onClick handler when clicked', () => {const handleClick = jest.fn();const { getByText } = render(<Button label="Click me" onClick={handleClick} />);fireEvent.click(getByText(/Click me/));expect(handleClick).toHaveBeenCalledTimes(1);});
Mocha + Chai + Sinon示例（Vue）：
安装依赖：
npm install --save-dev mocha chai sinon @vue/test-utils vue-cli-plugin-unit-mocha测试Vue组件：
// Button.spec.jsimport { shallowMount } from '@vue/test-utils';import Button from '@/components/Button.vue';import sinon from 'sinon';describe('Button.vue', () => {it('renders correctly', () => {const wrapper = shallowMount(Button, {propsData: { label: 'Click me' }});expect(wrapper.text()).to.equal('Click me');});it('emits click event', () => {const clickSpy = sinon.spy();const wrapper = shallowMount(Button, {propsData: { label: 'Click me' },listeners: { click: clickSpy }});wrapper.trigger('click');expect(clickSpy.calledOnce).to.be.true;});});
端到端（E2E）测试
E2E测试模拟真实用户操作，覆盖整个应用流程，确保各组件协同工作正常。常用的E2E测试工具有Cypress、Puppeteer（与Jest或Mocha搭配）和Nightwatch等。
Cypress示例：
安装Cypress：
npm install --save-dev cypress编写测试：
// cypress/integration/app_spec.jsdescribe('App', () => {beforeEach(() => {cy.visit('/');});it('displays welcome message', () => {cy.contains('Welcome to our app').should('be.visible');});it('can submit a form', () => {cy.get('#username').type('John Doe');cy.get('#email').type('[email protected]');cy.get('form').submit();cy.contains('Form submitted successfully').should('be.visible');});});
Puppeteer + Jest示例：
安装依赖：
npm install --save-dev puppeteer jest-puppeteer编写测试：
// e2e.test.jsconst puppeteer = require('puppeteer');describe('End-to-end test', () => {beforeAll(async () => {await page.goto('http://localhost:3000/');});it('fills out and submits a form', async () => {await page.type('#username', 'Jane Doe');await page.type('#email', '[email protected]');await Promise.all([page.waitForNavigation(),page.click('form button[type="submit"]'),]);expect(await page.textContent('h1')).toBe('Form submitted successfully');});});
单元测试侧重于代码的细节，确保每个小部分按预期工作；而E2E测试则关注整个应用流程，验证各部分之间的交互。结合使用这两种测试策略，可以有效地提高Web应用的质量和稳定性。
测试策略
单元测试策略
·覆盖率：确保测试覆盖了代码的大部分功能，至少包括所有公共API和关键逻辑。
· 隔离：每个测试应该独立于其他测试，避免副作用。
· 模拟（Mocking）：对于依赖外部服务或状态的组件，使用模拟来控制测试环境。
· 边界条件：测试各种输入边界，包括异常情况和错误处理。
· 重构与测试：在重构代码时，确保现有测试仍然通过。
E2E测试策略
· 真实环境模拟：尽可能在与生产环境相似的环境中运行测试。
· 场景覆盖：涵盖用户可能的所有操作路径和交互。
· 延迟加载与异步处理：处理页面加载和异步操作，确保测试等待适当的时间。
· 回滚策略：测试结束后，确保环境恢复到初始状态。
· 自动化部署集成：将E2E测试作为持续集成的一部分，确保每次代码提交后都能运行。
使用Jest和Cypress进行测试
Jest单元测试示例（React）
继续上面的Button组件测试，添加对异步逻辑的测试：
// Button.test.jsimport React from 'react';import { render, fireEvent, waitFor } from '@testing-library/react';import Button from './Button';test('renders button with correct text', () => {// ...});test('calls async onClick handler', async () => {const handleClick = jest.fn().mockResolvedValue();const { getByText } = render(<Button label="Click me" onClick={handleClick} />);fireEvent.click(getByText(/Click me/));await waitFor(() => expect(handleClick).toHaveBeenCalledTimes(1));});
Cypress E2E测试示例
增加对表单提交的E2E测试，假设有一个表单需要验证用户名和邮箱的唯一性：
// cypress/integration/app_spec.js// ...it('validates unique username and email', () => {cy.visit('/signup');cy.get('#username').type('John Doe');cy.get('#email').type('[email protected]');cy.get('form').submit();cy.url().should('include', '/signup');cy.get('.error').should('contain', 'Username already taken');cy.get('.error').should('contain', 'Email already in use');});
性能优化与测试
在编写测试时，也应注意性能优化：
·避免不必要的渲染：使用shallowMount或render（而非mount）来减少组件的渲染深度。
· 控制测试速度：Cypress允许设置defaultCommandTimeout，避免因网络延迟导致的测试失败。
· 使用测试覆盖率工具：如Istanbul，确保测试覆盖了代码的性能关键部分。
本书第1章与第2章介绍软件单元测试的概念和基础知识。
-
第1章简单介绍软件单元测试所包含的概念，包括桩对象和测试驱动函数、测试驱动开发、软件测试贯彻始终、软件测试金字塔、单元测试在传统/敏捷开发模式中的地位、精准测试、单元测试和白盒测试，以及单元测试的FIRST原则和AIR原则。
-
第2章介绍软件单元测试基础知识，包括动态自动化/手工单元测试、静态自动化/手工单元测试。在动态自动化单元测试中介绍了语句覆盖、分支覆盖、条件覆盖、条件/分支覆盖、MC/DC、路径覆盖和控制流覆盖。
第3章到第5章介绍C语言、Java语言和Python语言的单元测试框架。
-
第3章介绍C语言动态自动化单元测试框架，包括在Windows下安装C语言运行环境、在Windows和Linux下安装编译CUnit、查看测试报告、CUnit介绍和案例。
-
第4章介绍Java语言动态自动化单元测试框架，包括在Eclipse中创建Maven项目和配置JUnit与TestNG运行环境、JUnit 4测试框架、JUnit 5测试框架、TestNG测试框架、测试替身、变异测试、利用EvoSuite自动生成测试用例，以及在Jenkins中配置JUnit 4、JUnit 5、TestNG和Allure。
-
第5章介绍Python语言动态自动化单元测试框架，包括unittest、Pytest及Python的模拟对象和变异测试工具mutpy。
第6章与第7章介绍代码覆盖率工具和代码语法规范检查工具。
-
第6章介绍代码覆盖率工具，包括C语言覆盖率工具gcov和lcov、Java语言覆盖率工具JaCoCo，以及Python语言覆盖率工具Coverage和pytest-cov。
-
第7章介绍代码语法规范检查工具，包括Java语言静态分析工具PMD、Python语言静态分析工具flake8和pylint，以及多代码语法规范检查平台SonarQube。
-
第8章通过两个案例详细介绍TDD。
读者可以根据自己的需求对以上内容进行选择性阅读或者全部阅读。另外，为了巩固大家的学习效果，每一章结尾都有相应的习题。
顾翔凡言：整个IT都在放缓，近十年来主旋律就一个——人工智能。
原文始发于微信公众号（啄木鸟软件测试）：前端单元测试与端到端测试策略
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论