简介
enzyme-adapter-react-helper 是一个用于 React 组件单元测试的工具，它基于 enzyme 和 Jest 测试框架。它提供了一些实用的工具函数和辅助函数，使得编写 React 组件单元测试更加方便。
安装
使用 npm 进行安装：
npm install --save-dev enzyme enzyme-adapter-react-helper jest
配置
在 Jest 的配置文件中，需要配置 enzyme-adapter-react-helper 作为 enzyme 的适配器：
// jest.config.js
module.exports = {
// ...
setupFilesAfterEnv: ["<rootDir>/setupEnzymeAdapter.js"]
};在 setupEnzymeAdapter.js 中，需要引入 enzyme-adapter-react-helper 并进行配置：
// setupEnzymeAdapter.js
import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-helper";
configure({ adapter: new Adapter() });使用
辅助函数
shallowWrapperForComponent(Component, props = {}) => ShallowWrapper
根据组件和属性，返回一个浅渲染（shallow rendering）的 ShallowWrapper 实例。
-- -------------------- ---- -------
------ - -------------------------- - ---- ------------------------------
----------------------- -- -- -
----------- --------- ---- ------- ------- -- -- -
----- ------- - ----------------------------------------
----------------------------------
---
----------- --------- ---- ------ ------- -- -- -
----- ------- - --------------------------------------- - ------ -------- ---
----------------------------------
---
---mountWrapperForComponent(Component, props = {}) => ReactWrapper
根据组件和属性，返回一个完整渲染（full rendering）的 ReactWrapper 实例。
-- -------------------- ---- -------
------ - ------------------------ - ---- ------------------------------
----------------------- -- -- -
----------- --------- ---- ------- ------- -- -- -
----- ------- - --------------------------------------
----------------------------------
---
----------- --------- ---- ------ ------- -- -- -
----- ------- - ------------------------------------- - ------ -------- ---
----------------------------------
---
---工具函数
findByTestId(wrapper, testId) => S | undefined
在 ShallowWrapper 或 ReactWrapper 中查找具有指定 data-testid 属性的第一个元素，并返回它的 ShallowWrapper 或 ReactWrapper 实例。如果未找到，则返回 undefined。
-- -------------------- ---- -------
------ - ------------ - ---- ------------------------------
----------------------- -- -- -
----------- ------ ------- -- -- -
----- ------- - ----------------------------------------
----- ------ - --------------------- -------------
-------------------------
--------------------------------------------
---
---findByComponentName(wrapper, componentName) => S | undefined
在 ShallowWrapper 或 ReactWrapper 中查找第一个具有指定组件名称的元素，并返回它的 ShallowWrapper 或 ReactWrapper 实例。如果未找到，则返回 undefined。
-- -------------------- ---- -------
------ - ------------------- - ---- ------------------------------
----------------------- -- -- -
----------- ----------- -- -- -
----- ------- - ----------------------------------------
----- ------------ - ---------------------------- ------------------
-------------------------------------
---
---总结
enzyme-adapter-react-helper 提供了一些实用的工具函数和辅助函数，使得编写 React 组件单元测试更加方便。使用它可以减少单元测试的编写时间，并且可以提高代码覆盖率和测试质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/56595