前言
在当前前端开发中，使用 React 和 Redux 已经成为了不可或缺的技术，而其中后端的接口也需要进行测试，把前后端的代码进行集成测试便成了必要的手段。而 Jest 便是这方面的好选择，本文将介绍如何使用 Jest 进行 React 和 Redux 的 Full Stack 测试。
Jest 简介
Jest 是 Facebook 开源的基于 Jasmine 框架的 JavaScript 单元测试工具，它能够自动识别和模拟模块依赖，创建桩对象，自动转换 ES6/SASS/LESS 等文件，开箱即用，能够简化前端测试复杂度，而且在React中拥有很广泛的应用，能够较好的进行单元测试和集成测试。
基本配置
- 安装 Jest
npm install --save-dev jest
- 配置 package.json 在 "scripts" 中添加一行配置
"test": "jest"
- 配置 Jest 配置文件 jest.config.js
-- -------------------- ---- -------
-------------- - -
------ ------------------
---------- -
------------------ -------------
--
---------- --------------------------------- -------
--------------------- ------ ------ ------- --------
----------------------- --------------------------- ------------------------ -------------------------
----------------- -
---------------------- -----------------------------------
------------------------ ----------------------------------
--
-------------------- --------------- ------ -------------------- -------
-- 编写示例测试 在 src 文件夹下创建文件夹__tests__， 示例测试代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ------------------ ---- -------------------
------ - -------- - ---- --------------
------ ----- ---- --------------
------ --- ---- ------------
----- --------- - -------------------- ----- ---
----- ----- - --------------
------------- ----------- -- -- -
---------- ------ ----------- -- -- -
----- --------- - ------
--------- --------------
---- --
-----------
-
------------------------------------
---
---Full Stack 测试实践
实际项目中，集成测试通常涉及到异步 API 调用和多层嵌套组件之间的协调，下面将详细介绍 Jest 的相关用法。
异步 API 测试
在渲染 React 组件的前端应用程序中，通常会有 Ajax 请求，服务器响应处理等异步事件， Jest 有很多工具可以测试异步代码。
import { getJson } from './getData'
test('the data is peanut butter', () => {
return getJson().then(data => {
expect(data).toBe('peanut butter');
});
});Redux 模拟 Store
在集成测试时，使用 redux-mock-store 模拟 store 。
import configureStore from "redux-mock-store";
const mockStore = configureStore([]);
//使用mockStore生成store
const store = mockStore({});Enzyme 渲染（Shallow和Mount）
在 Jest 中，使用 Enzyme 进行组件渲染和测试，需要安装适当的适配器，例如 enzyme-adapter-react-16。
Shallow 渲染只渲染被测试组件，而不是它的所有子组件，这常常用于测试自闭合的组件。
import { shallow } from "enzyme";
const wrapper = shallow(<MyComponent />);Mount 渲染所有子元素，而不是只渲染被测试的元素，这个过程过程比Shallow昂贵。
import { mount } from "enzyme";
const wrapper = mount(
<Provider store={myMockStore}>
<ConnectedComponent />
</Provider>
);快照测试
使用 Jest 执行测试时，还可以快速地创建组件快照，并为之后的更改提供检查点。
-- -------------------- ---- -------
---------- --------- -------- ----------- -- -- -
----- --------- - ----------------
--------- --------------
---- --
-----------
--
--- ---- - -------------------
-------------------------------
---这将创建自上次运行快照测试以来对组件发生的所有更改的快照，使得在之后的运行中，可以迅速地验证代码是否仍然按预期方式运行。
结论
Jest 为 React 和 Redux 提供了强大的测试工具，可以帮助开发人员编写更具可靠性和稳定性的代码。在实践方面，需要注意到异步测试、Enzyme 测试和快照测试的使用，只有通过合理地使用所有这些工具，才能够更加有效地开发和测试 React 应用程序的前端和后端。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6703a6eed91dce0dc84be64d