React 是一种用于构建用户界面的 JavaScript 库，而 Jest 是一个流行的测试框架。在这篇文章中，我们将会探讨如何使用 Jest 测试 React 组件内部的状态变化。
什么是状态(State)
在 React 中，状态(State)是组件数据的唯一来源。它被声明为类组件或通过使用useState() Hook 来声明函数组件中的常量。
以下是一个例子：
------ ------ ---------- ---- --------
-------- --------- -
----- ------- --------- - ------------
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - --------- -----------
------
--
-
------ ------- --------上述代码中，count 是该组件的状态, setCount 函数允许我们更改状态. 在点击按钮时, 它会通过调用 onClick 设置其新值.
在 Jest 中, 我们可以编写测试来验证在调用 setCount 时组件状态是否正确更新了。
编写 Jest 测试
在 Jest 中, 我们需要运行一个测试套件, 其将包含我们的所有测试. 测试套件由一个或多个测试用例组成。每个测试用例都有一个或多个测试。
安装 Jest
如果您还没有安装 Jest, 您可以使用 npm 进行安装:
--- ------- ---------- ----
创建测试文件(timer.test.js)
我们将创建一个名为 timer.test.js 的测试文件，它将包含用于测试计数器组件状态变化的代码。
-- ------ --- ------- --------- --- ----- ------- --------- ------ ----- ---- -------- ------ - ------- --------- - ---- ------------------------- ------ ------- ---- ------------- ------------- ----- ---- ------ -- --------- -- -- - -- ------ --- ------- --------- ----- - --------- - - --------------- ---- -- ---- --- ------ ------- ----- ------ - ---------------- ----- -- ----- --- ------ ------------------------ -- ----- ---- --- ----- --- ----------- ----- ------ - -------------- ------- - -------- ----------------------------------- ---
在上述代码中，我们首先导入了 React 和 render()、fireEvent 测试工具。然后，我们编写了一个测试用例来验证当按钮被点击时，计数器组件是否正确更新计数状态的行为。
- 在第 6 行中，我们使用
render()函数将 Counter 组件渲染到屏幕上。 - 在第 9 行中，我们使用
getByText()函数获取到该按钮。 - 在第 12 行中，我们利用
fireEvent.click()模拟点击事件. - 最后，我们在第 15 行中，通过使用
getByText()函数确保 “You clicked 1 times” 已呈现在屏幕上。
运行测试
要运行我们的测试，我们需要在终端中运行以下命令：
--- ----
如果一切都设置正确，测试应该会通过。
结论
在这篇文章中，我们讨论了如何使用 Jest 测试 React 组件的状态变化。具体来说，我们编写一个测试套件和测试用例来验证计数器组件是否能正确更改状态。这些技巧可以帮助您确保 React 应用程序的稳定并防止意外副作用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67240c402e7021665e1237f1