介绍
随着前端技术的不断进步，越来越多的项目使用 React Native 进行开发。在这样的项目中，使用 Redux 存储数据是一种常见的做法。但如何测试这些存储的数据呢？本文将介绍如何使用 Enzyme 来测试 Redux 存储。
Enzyme 是什么
Enzyme 是由 Airbnb 开发的一款 React 组件测试工具，它提供了一组可读性强、灵活性强的 API，可以帮助你轻松地测试 React 组件。Enzyme 支持 Shallow Rendering、Full DOM Rendering 和 Static Rendering，而且可以与各种测试框架（如 Jest 和 Mocha）集成。
如何使用 Enzyme 测试 Redux 存储
在 React Native 项目中使用 Redux 存储数据时，我们需要编写 Reducer 和 Action Creator。为了测试这些代码，我们需要创建一个 Store，然后向其派发 Action，并检查 Store 内部的状态是否正确。这是 Enzyme 可以帮助我们的地方。
在这里，我们将使用 Jest 和 Enzyme 进行测试。首先，我们需要安装它们：
npm install --save-dev jest enzyme enzyme-adapter-react-16
然后，我们需要一个简单的 Reducer：
-- -------------------- ---- -------
----- ------------ - -
------ --
--
------ ------- -------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-然后，我们需要创建一个 Store：
import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);接下来，我们需要编写一个测试用例来测试 Increment Action。首先，我们需要在测试用例开始之前配置 Enzyme：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });然后，我们可以编写测试用例：
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----- ---- --------
------ --------- ---- --------------
------ - --------- - ---- ------------
------ ------- ---- ------------
------ - ----------- - ---- --------
----------------- ----------- -- -- -
--- ----------
--- ------
------------- -- -
----- - ---------------------
-------------- - ----------
--------- - ------------------ ------------- -----------
---
-------------- ----------- -------- -- -- -
----- ------ - ------------------------------------
-------------------------
---------------------------------------------------------
---
---------- ------- -- --- ------- -- -- -
----- ------------- - -
------ --
--
----- ------ - ------------------------------------
-------------------------
------------------------------------------------
---
---上面的代码中，我们首先创建了一个 Store，并且将其传递给了 Counter 组件。然后，我们模拟了一个“按下” Increment Button 的事件，并且期望 Store 中的状态正确。
结论
在 React Native 项目中，使用 Enzyme 测试 Redux 存储非常简单。通过编写测试用例，我们可以确保我们的代码在各种条件下表现正常。Enzyme 不仅可以测试 React 组件，还可以测试 Redux Store 和 Action Creator。这意味着我们可以完全测试我们的应用程序，从而提高代码的质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67308040eedcc8a97c921621