在开发 React 组件时，我们通常会使用 Enzyme 来进行测试。然而，在测试过程中，我们可能会遇到一个问题：displayName 不透明。这个问题会使我们在测试中无法正确地引用组件，从而导致测试失败。本文将详细介绍这个问题，并提供解决方案和示例代码。
什么是 displayName 不透明？
在 React 中，我们可以通过设置组件的 displayName 属性来为组件命名。这个属性可以在调试工具中显示组件的名称，有助于我们更好地理解组件的结构和层次。
然而，在使用 Enzyme 进行测试时，如果组件的 displayName 属性被设置为一个函数或者一个高阶组件，那么 Enzyme 就无法正确地识别组件的名称。这时，我们就会遇到 displayName 不透明的问题。
解决方案
为了解决 displayName 不透明的问题，我们可以通过两种方式来设置组件的 displayName 属性：
1. 使用字符串
最简单的方式是直接将 displayName 属性设置为一个字符串。例如：
function MyComponent() {
// ...
}
MyComponent.displayName = 'MyComponent';这样，Enzyme 就可以正确地识别组件的名称了。
2. 使用 displayName 函数
如果我们需要在组件内部根据一些条件来动态生成 displayName 属性，可以使用一个名为 getDisplayName 的函数来返回一个字符串，然后将这个函数赋值给组件的 displayName 属性。例如：
-- -------------------- ---- ------- -------- ------------- - -- --- - -------- -------------------------------- - ------ ---------------------------- -- --------------------- -- ------------ - ----------------------- - ----------------------------
这样，Enzyme 就可以正确地识别组件的名称了。
示例代码
下面是一个使用 Enzyme 测试 React 组件时遇到 displayName 不透明的问题的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
-------- ------------------ -
-------- ---------- -
------ ---------- ---------- ---
-
--------------- - -------------------------------- -- -------------- -- ---------------
------ ----
-
-------- ------------- -
------ ----------- -------------
-
----------------------- - --------------
----- ---------------- - ---------------------
----------------------- -- -- -
----------- ------- ---------- -- -- -
----- ------- - ----------------------- ----
-------------------------------------------------- -- ---- ---- -----
---
---在这个示例代码中，我们定义了一个名为 withHOC 的高阶组件，它会将传入的组件包装一层，并设置一个包含原组件名称的 displayName 属性。然后，我们使用这个高阶组件来包装 MyComponent 组件，并在测试中尝试查找 MyComponent 组件。然而，由于 MyComponent 的 displayName 属性被设置为一个函数，Enzyme 无法正确地识别组件的名称，导致测试失败。
为了解决这个问题，我们可以将 MyComponent 的 displayName 属性设置为一个字符串：
MyComponent.displayName = 'MyComponent';
或者使用一个 getDisplayName 函数来动态生成 displayName 属性：
function getDisplayName(WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}
MyComponent.displayName = getDisplayName(MyComponent);这样，Enzyme 就可以正确地识别组件的名称了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67da19b9a941bf71341d203c
