react hooks testing library

反应钩子测试库

简单而完整的 React hooks 测试实用程序鼓励良好的测试实践。

阅读文档

---

关于 React 18 支持的说明

如果您使用的是当前版本的react-testing-library ，请替换

 import { renderHook } from '@testing-library/react-hooks'

和

 import { renderHook } from '@testing-library/react'

替换后，可以卸载@testing-library/react-hooks 。

细节

作为 React 18 更改的一部分，已决定该库提供的renderHook API 将作为官方添加内容包含在react-testing-library (PR) 和react-native-testing-library (PR) 中目的是为我们的用户提供更有凝聚力和一致的实施。

请耐心等待，我们将在各自的测试库中完成这些更改。同时你可以安装@testing-library/react@^13.1

目录

• 问题
• 解决方案
• 何时使用该库
• 何时不使用该库
• 例子
  • useCounter.js
  • useCounter.test.js
• 安装
  • 对等依赖性
• 应用程序编程接口
• 贡献者
• 问题
  • ？虫子
  • 功能请求
  • ❓ 问题
• 执照

问题

您正在编写一个很棒的自定义钩子并且想要测试它，但是一旦调用它，您就会看到以下错误：

不变违规：只能在函数组件体内调用挂钩。

您真的不想仅仅为了测试这个钩子而编写一个组件，并且必须弄清楚如何触发可以更新钩子的所有各种方式，特别是考虑到如何将整个事物连接在一起的复杂性。

解决方案

react-hooks-testing-library允许您为 React hooks 创建一个简单的测试工具，处理在函数组件体内运行它们，并提供各种有用的实用函数来更新输入和检索令人惊叹的输出自定义挂钩。该库旨在提供尽可能接近在真实组件中本地使用钩子的测试体验。

使用这个库，您不必关心如何构建、渲染或与反应组件交互来测试您的钩子。您可以直接使用钩子并断言结果。

何时使用该库

1. 您正在编写一个带有一个或多个未直接绑定到组件的自定义挂钩的库
2. 您有一个复杂的钩子，很难通过组件交互进行测试

何时不使用该库

1. 您的钩子是与组件一起定义的，并且仅在组件中使用
2. 您的钩子很容易测试，只需使用它测试组件即可

例子

useCounter.js

 import { useState , useCallback } from 'react'

function useCounter ( ) {
  const [ count , setCount ] = useState ( 0 )

  const increment = useCallback ( ( ) => setCount ( ( x ) => x + 1 ) , [ ] )

  return { count , increment }
}

export default useCounter

useCounter.test.js

 import { renderHook , act } from '@testing-library/react-hooks'
import useCounter from './useCounter'

test ( 'should increment counter' , ( ) => {
  const { result } = renderHook ( ( ) => useCounter ( ) )

  act ( ( ) => {
    result . current . increment ( )
  } )

  expect ( result . current . count ) . toBe ( 1 )
} )

更高级的用法可以在文档中找到。

安装

npm install --save-dev @testing-library/react-hooks

对等依赖性

react-hooks-testing-library未与react版本捆绑在一起，以允许您安装要测试的特定版本。它也没有安装特定的渲染器，我们目前支持react-test-renderer和react-dom 。您只需要安装其中之一，但是，如果您同时安装了两者，我们将默认使用react-test-renderer 。有关更多信息，请参阅安装文档。一般来说，已安装的react版本和所选渲染器应该具有匹配的版本：

npm install react@^16.9.0
npm install --save-dev react-test-renderer@^16.9.0

注意： react 、 react-test-renderer和react-dom支持的最低版本是^16.9.0 。

应用程序编程接口

请参阅 API 参考。

贡献者

感谢这些优秀的人（表情符号键）：

迈克尔·佩珀 ？ ？ ？ ️	乙豆腐广场	帕特里克·P·亨利 ？ ？	马修斯·马克斯	德鲁夫·帕特尔 ？ ？	纳撒尼尔·塔克 ？ ？	谢尔盖·格里先科 ？
何塞·M·索布雷佩尔	马塞尔·廷纳	丹尼尔·K. ？	文斯·马龙	塞巴斯蒂安·韦伯	克里斯蒂安·吉尔	JavaScript 乔 ✅ ️
萨拉·达扬 ？	罗曼·古谢夫	亚当·塞克尔	佐佐木惠也 ️	胡晨	乔什 ？ ？ ️	纳曼·赫希菲尔德
布雷登厅	雅各布·M·埃文斯 ️	泰格·阿布罗迪 ️	阿姆·穆罕默德 ️	尤哈娜·贾希艾宁	延斯·迈德茨玛 ️	马可·莫雷蒂 ？
马丁·V.	埃罗扎克	尼克·麦柯迪 ？	艾莉亚	麻木86	亚历克斯·杨 ？	本·兰伯特
大卫·乔·勒拉特	埃文·哈蒙	杰森·布朗	丁嘉伟	列昂尼德·沙加布季诺夫	利维·布彻	米歇尔·塞特帕尼
山姆	塔奈·普拉塔普	汤姆·里斯-赫德曼	伊克巴尔125	悬崖赵卜特 ？	乔恩·库普斯	乔纳森·佩珀 ？
肖恩·贝恩斯	米哈伊尔·瓦辛	亚历山大·格比奇	乔纳森·霍姆斯	迈克尔·德博伊 ？	安东·季诺维也夫 ？	玛丽安娜·埃塞拉特 ？
马坦·博伦克劳特 ？	安德罗格	布莱恩·韦恩 ？ ？	罗伯特·斯诺 ️	克里斯·陈 ️	马修斯	赖树新

该项目遵循所有贡献者规范。欢迎任何形式的贡献！

问题

想要做出贡献吗？寻找“Good First Issue”标签。

？虫子

请针对错误、缺少文档或意外行为提出问题。

查看错误

功能请求

请提出问题以建议新功能。通过添加 ? 对功能请求进行投票。这有助于维护人员优先考虑要做什么。

查看功能请求

❓ 问题

对于与使用库相关的问题，您可以在此处提出问题，或访问支持社区：

• 不和谐
• 堆栈溢出

执照

麻省理工学院