Office UI Fabric React 项目中的 Cypress 端到端测试最佳实践

Office UI Fabric React 项目中的 Cypress 端到端测试最佳实践

fluentui 项目地址: https://gitcode.com/gh_mirrors/of/office-ui-fabric-react

前言

在 Office UI Fabric React 项目中，我们使用 Cypress 进行端到端测试(E2E)，特别是针对那些无法通过 jsdom 可靠测试的场景，如焦点管理等。本文将详细介绍如何在项目中高效地使用 Cypress 进行组件测试。

为什么选择 Cypress

Cypress 相比传统测试工具具有以下优势：

1. 真实浏览器环境：能够模拟用户真实操作
2. 自动重试机制：提高测试稳定性
3. 时间旅行调试：可以查看测试每一步的状态
4. 组件级测试：可以直接挂载 React 组件进行测试

测试环境搭建

在项目中运行 Cypress 测试非常简单：

1. 进入需要测试的组件包目录
2. 执行 yarn e2e 命令启动交互式测试运行
3. 如需无头模式运行(如 CI 环境)，可添加 --mode run 参数

测试文件结构

项目中的测试文件按照以下结构组织：

• v9 版本组件：位于 packages/react-<组件名>/e2e/<组件名>.e2e.tsx
• v8 版本组件：位于 packages/react-examples/<包名>/<组件名>/e2e/<组件名>.e2e.tsx

编写测试的最佳实践

测试结构

测试文件使用 describe() 和 it() 组织，与 Jest 或 Mocha 类似。每个测试用例应专注于一个特定功能。

import * as React from 'react';
import { mount } from '@cypress/react';
import { Button } from './Button';

describe('Button', () => {
  it('should trigger onClick when clicked', () => {
    const onClick = cy.stub();
    mount(<Button onClick={onClick}>Click me</Button>);
    
    cy.contains('Click me')
      .click()
      .then(() => {
        expect(onClick).to.have.been.calledOnce;
      });
  });
});

断言编写

Cypress 使用 Chai 风格的断言，常用 .should() 方法：

// 检查元素文本
cy.get('#title').should('have.text', 'Welcome');

// 检查元素存在
cy.contains('Submit').should('exist');

// 检查元素数量
cy.get('.list-item').should('have.length', 5);

// 检查焦点元素
cy.focused().should('have.text', 'Username');

元素交互

项目中使用两种方式与元素交互：

1. Cypress 内置方法：如 click(), type()
2. cypress-real-events：通过 Chrome 开发者工具协议触发真实事件

推荐优先使用 cypress-real-events，因为它能模拟更真实的用户行为，如悬停和 Tab 键导航。

常见问题与解决方案

测试稳定性问题

异步操作可能导致测试不稳定，解决方案：

1. 确保前置状态：在操作前验证 UI 状态
2. 避免负断言：除非验证某个状态已消失
3. 组件初始化完成：等待组件完成初始操作(如焦点设置)

调试技巧

1. 查看失败截图：位于 cypress/screenshots 目录
2. 逐步执行：在交互模式下查看每个步骤
3. 验证可靠性：使用 Cypress._.times 重复运行测试

特殊场景处理

1. 无焦点状态：使用 cy.focused().should('not.exist')
2. 精确匹配文本：使用 cy.contains('selector', 'text') 避免子串匹配
3. 异步变量：使用 cy.then() 确保获取最新值

测试编写原则

1. 用户视角：从用户角度思考如何与组件交互
2. 避免 async/await：Cypress 命令已内置异步处理
3. 明确等待条件：优先等待具体 UI 状态而非固定时间

通过遵循这些最佳实践，可以在 Office UI Fabric React 项目中编写出稳定、可靠的 Cypress 端到端测试，确保组件在各种交互场景下都能正常工作。

fluentui 项目地址: https://gitcode.com/gh_mirrors/of/office-ui-fabric-react