首页 > 网络编程 > JavaScript > javascript类库 > React > react调试和测试代码

react调试和测试代码的小技巧

2024-10-19 16:24:37 作者：eveningwater

在开发React应用时,严格模式StrictMode可以帮助开发者捕捉到组件中的错误和潜在问题,安装React Developer Tools浏览器扩展检查组件的props和状态,直接修改以及分析性能,@testing-library/react和Cypress或Playwright等工具可以有效地测试React组件和执行端到端测试

调试 react 代码

在将组件部署到生产环境之前，使用 StrictMode 捕获组件中的错误

使用严格模式是一种在开发过程中检测应用程序中潜在问题的主动方法。它有助于识别以下问题：

效果中的清理不完整，例如忘记释放资源。
React 组件中的杂质，确保它们在给定相同输入（props、state 和 context）的情况下返回一致的 JSX。

下面的示例显示了一个错误，因为从未调用过 clearInterval。严格模式通过运行两次效果（创建两个间隔）来帮助捕获此错误。

export default function App() {
  const [time, setTime] = useState<Date>(new Date());
  const handleTimeChange = useCallback((newTime: Date) => {
    // 这将被记录两次，因为 `useEffect`
    // 使用 `StrictMode` 运行两次，并且我们从未清除定时器
    console.log("这是当前时间", newTime);
    setTime(newTime);
  }, []);

  useEffect(() => {
    const intervalId = setInterval(() => {
      handleTimeChange(new Date());
    }, 1_000);n
    // 取消注释下面这行代码来修复错误
    // return () => clearInterval(intervalId);
  }, [handleTimeChange]);

  return (
    <div className="App">
      <h1>当前时间: {time.toLocaleTimeString()}</h1>
    </div>
  );
}

安装 React Developer Tools 浏览器扩展来查看/编辑你的组件并检测性能问题

React Developer Tools 是一款必备扩展程序（Chrome、Firefox）。此扩展程序可让你：

可视化并深入研究 React 组件的细节，检查从 props 到状态的所有内容。
直接修改组件的状态或 props，以查看更改如何影响行为和渲染。
分析你的应用程序以确定组件重新渲染的时间和原因，帮助你发现性能问题。
等等。

React DevTools 组件：突出显示渲染的组件以识别潜在问题

如果你的应用存在性能问题时，都可以使用这个技巧。你可以突出显示渲染的组件(高亮显示)以检测潜在问题（例如，渲染次数过多）。

在自定义 hooks 中利用 useDebugValue 可以在 React DevTools 中获得更好的可视性

useDebugValue 可以成为一种便捷的工具，用于在 React DevTools 中为自定义钩子添加描述性标签。这使得直接从 DevTools 界面监视它们的状态变得更加容易。

例如，考虑一下我用来获取和显示当前时间的这个自定义钩子，每秒更新一次：

const useCurrentTime = () => {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const intervalId = setInterval(() => {
      setTime(new Date());
    }, 1000);
    return () => clearInterval(intervalId);
  }, [setTime]);

  return time;
};

不好的做法：如果没有 useDebugValue，实际时间值不会立即可见；你需要扩展 CurrentTime 钩子：

推荐做法：使用 useDebugValue 可以很容易地看到当前时间：

const useCurrentTime = () => {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const intervalId = setInterval(() => {
      setTime(new Date());
    }, 1000);
    return () => clearInterval(intervalId);
  }, [setTime]);

  // 新增代码
  useDebugValue(time);

  return time;
};

注意：请谨慎使用 useDebugValue。它最好用于共享库中的复杂钩子，因为了解内部状态至关重要。

使用 why-did-you-render 等相关库来跟踪组件渲染并识别潜在的性能瓶颈

有时，组件会重新渲染，但无法立即查明原因。虽然 React DevTools 很有用，但在大型应用中，它可能只会提供模糊的解释，例如“hook #1 已渲染”，这可能是无用的。

在这种情况下，你可以求助于 why-did-you-render 库。它提供了有关组件重新渲染原因的更详细见解，有助于更有效地查明性能问题。来看以下一个示例,多亏了这个库，我们可以找到 FollowersList 组件的问题。

在严格模式下第二次渲染时隐藏日志

StrictMode 有助于在应用程序开发早期发现错误。

但是，由于它会导致组件渲染两次，因此可能会导致重复的日志，从而使控制台变得混乱。

你可以在 Strict Mode 的第二次渲染期间隐藏日志以解决此问题,勾选hide logs....选项即可。如下图所示:

测试 react 代码

使用 React 测试库有效地测试你的 React 组件

想要测试你的 React 应用吗？请务必使用 @testing-library/react。

你可以在此处找到一个最基本的示例。

React 测试库：使用测试演练场轻松创建测试用例

难以决定在测试中使用哪些测试用例？

考虑使用测试演练场从组件的 HTML 快速生成测试用例。

以下是两种使用方法：

方法 1：在测试中使用 screen.logTestingPlaygroundURL()。此函数生成一个 URL，打开测试环境工具，其中已加载组件的 HTML。

方法 2：安装 Testing Playground Chrome 扩展程序。此扩展程序允许你直接在浏览器中将鼠标悬停在应用中的元素上，以找到测试它们的最佳查询。

使用 Cypress 或 Playwright 进行端到端测试

需要进行端到端测试吗？

请务必查看 Cypress 或 Playwright。

使用 MSW 在测试中模拟网络请求

有时，你的测试需要发出网络请求。

与其实现自己的模拟（或者，但愿不会发出实际的网络请求），不如考虑使用 MSW（Mock Service Worker）来处理你的 API 响应。

MSW 允许你直接在测试中拦截和操纵网络交互，为模拟服务器响应提供了一种强大而直接的解决方案，而不会影响实时服务器。

这种方法有助于维护受控且可预测的测试环境，从而提高测试的可靠性。

总结

在开发React应用时,使用严格模式StrictMode可以帮助开发者捕捉到组件中的错误和潜在问题,如资源未正确释放或组件纯度问题,安装React Developer Tools浏览器扩展可以深入检查组件的props和状态,直接修改它们以及分析性能问题,此外,使用useDebugValue可以为自定义hooks在React DevTools中添加描述性标签,提高可视化监控的便利性,为了进一步追踪组件的渲染性能和识别性能瓶颈,可以利用why-did-you-render库,在进行测试时,@testing-library/react和Cypress或Playwright等工具可以有效地测试React组件和执行端到端测试,另外,使用MockServiceWorker（MSW）模拟网络请求,保持测试环境的可控性和预测性。

到此这篇关于react调试和测试代码的小技巧的文章就介绍到这了,更多相关react调试和测试代码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！