Enzyme + React Native: UI测试
React Native是一种流行的跨平台框架，可以用于构建移动应用程序。为了确保应用程序的正确性和可靠性，需要对用户界面（UI）进行测试。在这篇文章中，将介绍Enzyme和React Native如何结合使用来进行UI测试。
Enzyme是React组件的JavaScript测试工具，由Airbnb开发。它提供了一组用于测试React组件的API，例如检查渲染输出，模拟用户交互等。Enzyme还提供了用于断言和测试驱动开发的工具。
安装
在开始使用Enzyme之前，需要先安装Enzyme和相关插件。
npm install --save-dev enzyme enzyme-adapter-react-16 react-test-renderer
设置
启用Enzyme需要设置适配器。如果使用React 16，则需要安装 "enzyme-adapter-react-16" 适配器，并配置Jest使用它。
// setupTests.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });Jest还需要在package.json文件中配置。
{
"jest": {
"setupFilesAfterEnv": [
"./setupTests.js"
]
}
}使用
现在已经完成了Enzyme的安装和设置，接下来看一些基本的用法示例。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ --- ---- --------
------------- ----------- -- -- -
---------- --- ----------- -- -- -
----- ------- - ------------ ----
----------------------------------
---
-------- ---- -- --- ----------- -- -- -
----- ------- - ------------ ----
----- ---- - ---------------------
----------------------------------- ---------
---
------------ --------- -- -- -
----- ----------- - ----------
----- ------- - --------------- --------------------- ----
---------------------------------------------------
---------------------------------------------
---
---这里对一个简单的React Native应用程序代码进行了测试。
首先，使用 "shallow" API 浅渲染应用程序，并使用 "toMatchSnapshot" API 生成快照以比较渲染输出。接着，使用 "find" API 查找文本并使用 "text" API 测试文本是否为 "Hello, world!"。最后，使用 "simulate" API 模拟"onPress"事件并使用 "toHaveBeenCalledTimes" API 判断模拟函数的调用次数。
结论
Enzyme是一个强大的测试框架，可以用于测试React Native应用程序的UI。通过使用Enzyme，您可以更轻松地测试UI组件，增强应用程序的可靠性和稳定性。启用Enzyme也非常简单，只需安装并配置适配器即可开始使用。
码样
App.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ----- ----- ---------------- - ---- ---------------
------ ------- -------- ----- -
------ -
----- -------------------------
----- -------------------------- -------------
----------------- --------------------- ----------- -- ------------- ----------
----- ------------------------------- ---------
-------------------
-------
--
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
----- -
--------- ---
------ -------
--
------- -
---------------- ----------
---------------- ---
------------------ ---
------------- --
---------- ---
--
----------- -
------ -------
--------- ---
--
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670a478dd91dce0dc880119c