在开发前端应用时，Redux 是一种常用的数据管理库。而在使用 Redux 进行开发时，测试也是很重要的一环。redux-testing-library 就是一款能够帮助我们进行 Redux 测试的 npm 包。
在本文中，我们将介绍 redux-testing-library 的使用，包括安装、初始化、测试方法等，以及一些最佳实践。最终，你将能够基于 redux-testing-library 编写出高效且可靠的 Redux 测试代码。
安装
redux-testing-library 可以通过 npm 安装，通过命令：
npm install --save-dev @testing-library/react @testing-library/react-hooks @testing-library/user-event @testing-library/dom redux-mock-store redux-testing-library
初始化
为了使用 redux-testing-library，我们首先需要准备一个 Redux store。在实践中，我们通常使用 redux-mock-store 以及运行的中间件来创建一个测试用的 Redux store。
这里提供一个简单的 store 配置示例：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
------ ------ ---- ---------------
------ ----------- ---- --------------
----- ----------- - ------- --------
------ ----- --------- - -------------- -- -
----- ------------------------- - ----------------
--------------
---------------
------ -------------------------------------- --------------
--上面的代码中，我们使用了 Redux 的 createStore 和 applyMiddleware 方法，以及 redux-thunk 和 redux-logger 中间件。其中 mockStore 方法接收一个初始状态作为参数，返回一个测试用的 Redux store 对象。
测试方法
在使用 redux-testing-library 进行 Redux 测试时，我们通常会使用 render 函数渲染一个测试组件，并使用 Redux 提供的 Provider 将测试用的 Redux store 对象传递给组件。然后，我们就可以像平常一样测试组件与 Redux 的交互。
下面是一个基础的测试用例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ------ - ---- -------------------------
------ - ----------- - ---- --------
------ ----------- ---- --------------
------ --- ---- ---------
------------- ----------- -- -- -
--- ------
------------- -- -
----- - ------------------------ ----
---
------------- --- --------- ------- ---------- -- -- -
-------
--------- --------------
---- --
-----------
--
---
---在上面的代码中，我们通过 createStore 创建一个空的 Redux store，然后使用 <provider> 将 store 传递给待测试的组件，最后使用 render 渲染组件，以检查是否渲染正常。
此外，redux-testing-library 还提供了一些额外的测试方法，例如：
getByTestId
根据给定的 test id 获取元素。
const { getByTestId } = render(
<Provider store={store}>
<App />
</Provider>
);
const incrementButton = getByTestId('increment-button');findByTestId
等待异步渲染，然后根据给定的 test id 获取元素。
const { findByTestId } = render(
<Provider store={store}>
<App />
</Provider>
);
const incrementButton = await findByTestId('increment-button');fireEvent
触发相应事件。
-- -------------------- ---- -------
----- - ----------- - - -------
--------- --------------
---- --
-----------
--
----- --------------- - --------------------------------
---------------------------------最佳实践
- 编写前，先思考测试用例。记录所有的测试用例，确保测试代码覆盖所有可能的情况。
- 使用 Redux DevTools 支持调试。它提供了一些项目结构、状态、时间旅行以及监控能力，让你编写测试更加顺畅。
- 确保清理。当测试结束时，要确保你的代码状态是干净的，并且不会对下一次测试产生影响。
- 使用 mock。有时，测试的场景和数据是难以自然地设置的，这时候可以使用 mock 数据或 mock 对象来代替真实的 API 请求或组件。
- DRY。确保你的测试代码DRY（Don't Repeat Yourself），避免重复代码和重复开销。
结论
redux-testing-library 是一款为开发者提供了轻松、高效、可靠的 Redux 测试的 npm 包。通过本文提供的学习，你已经可以开始学习和使用它了。在实践中，你可以逐步形成针对具体业务场景的测试最佳实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672e40520b171f02e1db4