引言
在 React 中，Hooks 技术已经成为必备技能之一。但是，Hooks 技术的单元测试并不是非常方便，因为 React 组件都是基于组件树上下文中的状态管理。这就需要开发者对测试库进行选择和配置。本文将提供一个开箱即用的单元测试库 @testing-library/react-hooks ，它可以方便地测试 React 的 Hooks 组件。
安装
@testing-library/react-hooks 库可通过 npm 安装：
npm install --save-dev @testing-library/react-hooks
创建测试
在开始创建测试之前，我们先创建一个可以被测试的 React 组件。以下是一个计数器的组件。
-- -------------------- ---- ------- ------ ------ ---------- ---- ------- -------- --------- - ----- ------- --------- - ----------- ----- ----------- - -- -- -------------- - -- ------ - ------- --------------------- ---------------------- ------- ------- ----- --------- - - ------ ------- -------展开代码
然后，我们可以使用 @testing-library/react-hooks 库测试组件的行为。
-- -------------------- ---- ------- ------ ------------ ---- ---- ------------------------------ ------ ---------- ---- -------------- ---------------------- -- -- - ---------- --------- -- --- -- -- - ----- -------- - ------------- -- ------------- --------------------------------------- ------ -- --------------------------- --------------------------------------- -- ---------- --------- -- --- -- -- - ----- -------- - ------------- -- ------------- --------------------------------------- ------ -- --------------------------- ---------------------------------------- -- --展开代码
以上测试用例使用了 @testing-library/react-hooks 和 React Testing Library 中提供的 renderHook 函数。renderHook 函数可以帮助我们测试 Hooks 的行为，检查状态的变化和副作用，使我们提高测试效率。
测试 Hook
既然已经测试了组件的行为，我们继续使用 Hooks 技术编写测试用例。以下是一个使用 useCounter 自定义 Hook 的组件。
-- -------------------- ---- ------- ------ ----- ---- ------- ------ ---------- ---- -------------- -------- --------- - ----- ------- ---------- ---------- - ------------ ------ - ---- ---------------------- ---------- ------- --------- ------- ----------- -- ------------ ------------------------ - --------- ------- ----------- -- ------------ ------------------------ - --------- ------ - - ------ ------- -------展开代码
我们可以使用 renderHook 函数测试 useCounter Hook 的行为。
-- -------------------- ---- ------- ------ ------------ ---- ---- ------------------------------ ------ ---------- ---- -------------- ---------------------- -- -- - ---------- --------- -- --- -- -- - ----- -------- - ------------- -- ------------- --------------------------------------- ------ -- --------------------------- --------------------------------------- -- ---------- --------- -- --- -- -- - ----- -------- - ------------- -- ------------- --------------------------------------- ------ -- --------------------------- ---------------------------------------- -- --展开代码
在上面的测试中，我们针对 useCounter 行为编写了两个测试。
高级用法
我们可以使用 async/await 来测试异步行为。如下面的例子检查 useFetch Hook 是否正确返回数据。
-- -------------------- ---- ------- ------ ------------ ---- ---- ------------------------------ ------ -------- ---- ------------ -------------------- -- -- - ---------- ------- ----- -- -- - ----- -------- ------------------ - ------------- -- ----------------------------------------------------------------------------- - ----------------------------------------- ----- ------------------- ------------------------------------------ ------------------------------------------- -- --展开代码
结论
单元测试是良好软件工程和提高代码可靠性的有效手段，使用 @testing-library/react-hooks 可以方便地测试 React Hooks 组件。本文已经介绍了其基本用法，您可以深入学习并将其应用于您的开发项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/168230
