30、React 开发中的测试与代码重构实践

React 开发中的测试与代码重构实践

1. React 测试基础

在 React 开发里，测试是保证代码质量的关键环节。以 Cypress 进行端到端（E2E）测试为例，我们可以借助 cy.get() 方法依据 data-testid 属性来获取 DOM 元素。这个属性主要用于测试，能让我们无需担心 CSS 选择器或元素内容的变化。

1.1 示例测试代码

// 测试获取 quote-container 元素
cy.get('[data-testid="quote-container"]').should('have.length', 1);

此测试代码在导航到网页后，会查找具有 data-testid 属性为 quote-container 的元素，并检查是否恰好存在一个这样的元素。若存在，测试通过；反之则失败。

1.2 测试中的问题与解决方案

不过，在测试时会遇到一些问题。比如，页面标题渲染正常，但引用内容未显示；或者引用内容可见，可在编写测试时无法确定预期引用。像 https://icodeit-juntao.github.io/quote-of-the-day/ 这个网站，每次访问都会生成随机引用。为解决这类问题，我们可采用拦截网络请求的方