在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

pmndrs/zustand

菜单

测试与开发

相关源文件

本页面提供了关于使用 Zustand 进行状态管理的应用程序测试以及 Zustand 库本身开发/贡献的全面指南。有关在生产环境中重置状态的信息，请参阅 重置状态。

概述

测试使用 Zustand 的应用程序需要特定的方法来确保适当的测试隔离和可靠的结果。本指南涵盖了设置测试环境、创建有效的模拟以及测试独立的 store 和消费它们的组件。

来源： docs/guides/testing.md7-53

设置测试环境

在测试使用 Zustand 的应用程序之前，您需要配置测试运行器并设置适当的测试实用程序。

测试运行器

Zustand 可与任何现代 JavaScript 测试运行器配合使用，但官方支持和示例提供给

  • Jest：一个功能齐全的测试框架，提供测试运行和断言
  • Vitest：一个 Vite 原生测试运行器，专为速度和现代 JavaScript 设计

两种测试运行器都需要配置来处理 JavaScript/TypeScript 语法，并为组件测试提供模拟 DOM 环境 (JSDOM)。

测试库

对于测试连接到 Zustand store 的 React 组件，推荐的方法是

  • React Testing Library (RTL)：用于测试 React DOM 组件
  • Native Testing Library (RNTL)：用于测试 React Native 组件
  • Mock Service Worker (MSW)：用于模拟网络请求

这些库鼓励像用户与组件交互那样进行测试，而不是测试实现细节。

来源： docs/guides/testing.md9-52

模拟 Zustand 进行测试

为确保测试相互隔离，您需要正确地模拟 Zustand 以在测试之间重置 store。方法在 Jest 和 Vitest 之间略有不同。

Jest 配置

创建一个模拟，它将跟踪和重置所有 store

模拟系统的工作原理是

  1. 包装实际的 Zustand create 和 createStore 函数
  2. 在 storeResetFns 集合中跟踪每个 store 的初始状态
  3. 在每次测试后自动将所有 store 重置到其初始状态

这确保了测试不会通过共享的全局状态相互影响。

来源： docs/guides/testing.md84-149

Vitest 配置

Vitest 的设置与 Jest 类似，但需要 ES 模块语法

  1. 在项目根目录（或配置的根目录下）创建一个 __mocks__ 目录
  2. 创建一个 zustand.ts 模拟文件，该文件导出 create 和 createStore 的包装版本
  3. 在 Vitest 设置文件中配置模拟

来源： docs/guides/testing.md173-247

测试 React 组件

测试使用 Zustand 的 React 组件涉及

  1. 使用 Zustand 模拟设置测试环境
  2. 使用 React Testing Library 渲染组件
  3. 使用 user-event 与组件交互
  4. 断言组件状态和行为

这是使用 Zustand 的组件的典型测试流程

来源： docs/guides/testing.md294-508

测试独立 store 组件

对于使用 create() 创建的全局 Zustand store 的组件

  1. 导入使用 store 的组件
  2. 使用 React Testing Library 渲染它
  3. 查找元素并与之交互
  4. 断言 UI 是否正确更新

模拟实现将确保 store 在测试之间被重置。

来源： docs/guides/testing.md394-439

测试基于 Context 的 store 组件

对于使用 React Context 中的 Zustand 的组件

  1. 导入提供并使用基于 Context 的 store 的组件
  2. 使用其 provider 渲染组件
  3. 与组件交互
  4. 断言预期的行为

相同的 store 重置机制也适用于基于 Context 的 store。

来源： docs/guides/testing.md459-508

开发工作流

当贡献 Zustand 库本身时，请遵循以下指南

项目结构

Zustand 采用单仓库结构，以提高清晰度和可维护性

来源： .github/pull_request_template.md1-9

贡献指南

贡献 Zustand

  1. 问题跟踪:

    • 使用 GitHub Discussions 进行 Bug 报告、提问和想法交流
    • 使用 pnpm run fix 格式化代码和文档

  2. 拉取请求:

    • 引用相关的问题或讨论
    • 提交前运行测试和 linting
    • 提供清晰的变更摘要

来源： .github/pull_request_template.md1-9 .github/ISSUE_TEMPLATE/config.yml1-12 .github/ISSUE_TEMPLATE/bug_report.md1-7

测试库

在开发库本身时

  1. 为新功能或 Bug 修复定义测试用例
  2. 跨不同环境（React、React Native）进行测试
  3. 确保向后兼容性
  4. 验证 TypeScript 类型是否正确

测试模式示例

以下是 Zustand 应用程序的一些实际测试模式示例

基本 store 测试

此模式直接测试 store 的功能

组件测试

此模式测试使用 Zustand store 的组件

来源： docs/guides/testing.md394-508

常见问题排查

问题可能原因解决方案
相互影响的测试Store 在测试之间未正确重置确保 Zustand mock 已正确配置
SSR 中的 hydration 错误服务器和客户端之间的 store 状态不匹配在两边初始化相同的状态
测试中的类型错误缺少类型定义添加适当的 TypeScript 配置
React 关于状态更新的警告在 React 生命周期外使用 setState将状态更改包装在 act() 中

结论

测试 Zustand 应用程序需要正确设置测试环境和模拟策略以确保测试隔离。通过遵循本指南中的模式和建议，您可以为独立和基于 Context 的 Zustand store 开发可靠的测试。

有关更具体的指南，请参阅