Enzyme 始终找不到元素的解决方案
前言
在前端开发中，一种常见的测试方式是使用 Enzyme 进行组件测试。然而，在实践中，我们可能会遇到一些问题，比如 Enzyme 始终找不到元素。这篇文章将介绍一些可能造成这种问题的原因以及解决方案。
问题描述
假设我们有一个简单的组件 Button，其中包含一个按钮和一个文本标签。我们想测试这个组件是否正确地渲染了这两个元素。
-- -------------------- ---- -------
------ ----- ---- --------
----- ------ - -- -- -
------ -
-----
------------- -----------
-----------------
------
--
--
------ ------- -------我们使用 Enzyme 中的 shallow 方法进行测试：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
---------- ------ ------ --- ------ -- -- -
----- ------- - --------------- ----
--------------------------------------------
------------------------------------------
---
---然而，当我们运行测试时，我们却发现出现了以下错误：
Expected: truthy Received: undefined
我们发现，在测试中使用 wrapper.find('button') 和 wrapper.find('span') 找不到任何元素。
解决方案
下面是一些可能造成 Enzyme 找不到元素的原因以及相应的解决方案。
- 组件未完全渲染
在 shallow 方法中，渲染的是组件的最外层父节点，其子节点只是虚拟节点，并没有被真正地渲染。因此，如果我们在测试中使用了某个按钮或其他元素，但是 Enzyme 找不到，就有可能是因为组件还未完全渲染。
解决方案：
可以尝试使用 mount 方法代替 shallow 方法。mount 方法会将整个组件及其子组件都渲染出来。
-- -------------------- ---- -------
------ - ----- - ---- ---------
------------------ -- -- -
---------- ------ ------ --- ------ -- -- -
----- ------- - ------------- ----
--------------------------------------------
------------------------------------------
---
---- 元素的属性值发生变化
有时候，如果我们不小心改变了元素的某个属性值，比如 id 或 className，那么 Enzyme 就可能无法找到这个元素。
解决方案：
在这种情况下，可以使用 element 属性代替元素的名称，然后使用 props 属性来匹配属性值。
describe('Button', () => {
it('should render button and text', () => {
const wrapper = shallow(<Button />);
expect(wrapper.find({ element: 'button', props: { children: 'Click me' } })).toBeTruthy();
expect(wrapper.find({ element: 'span', props: { children: 'Text' } })).toBeTruthy();
});
});- 元素包含子节点时，子节点的渲染顺序发生变化
当元素包含子节点时，Enzyme 在查找子节点时会按照它们在 JSX 中出现的顺序进行渲染。如果我们改变了子节点的顺序，那么 Enzyme 就无法找到这些元素。
解决方案：
在这种情况下，可以使用 childAt 方法代替 find 方法，并指定子节点的索引号来查找元素。
describe('Button', () => {
it('should render button and text', () => {
const wrapper = shallow(<Button />);
expect(wrapper.find('[element="button"]')).toEqual(wrapper.childAt(0));
expect(wrapper.find('[element="span"]')).toEqual(wrapper.childAt(1));
});
});总结
Enzyme 始终找不到元素可能是由于多种原因造成的，比如组件未完全渲染、元素的属性值发生变化或者子节点的渲染顺序发生变化等。针对不同的原因，我们可以采取相应的解决方案，比如使用 mount 方法、使用 element 属性和 props 属性来匹配属性值以及使用 childAt 方法指定子节点的索引号查找元素等。通过这些解决方案，我们可以更加准确和稳定地测试我们的组件。
参考代码
Github 仓库: https://github.com/Liuqing650/enzyme-find-not-found
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ------- - ---- ---------
------ ------ ---- -----------
------------------ -- -- -
---------- ------ ------ --- ------ -- -- -
----- ------- - --------------- ----
--------------------------------------------
------------------------------------------
---
---------- ------ ------ --- ---- ---- ------- -- -- -
----- ------- - ------------- ----
--------------------------------------------
------------------------------------------
---
---------- ------ ------ --- ---- ---- --------- ----- ------- -- -- -
----- ------- - --------------- ----
--------------------- -------- --------- ------ - --------- ------ --- - -----------------
--------------------- -------- ------- ------ - --------- ------ - -----------------
---
---------- ------ ------ --- ---- ---- --------- ----- ------- -- -- -
----- ------- - --------------- ----
-----------------------------------------------------------------------
---------------------------------------------------------------------
---
---
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c4691683d39b48817f7ffe