在进行 React 组件测试的时候，我们通常会选择使用 Enzyme 这一库。但有时候，我们在使用 shallow() 方法时会遇到一个奇怪的错误，如下所示:
---------------- -- --- - --------
这个错误常常会在使用 Jest 进行测试时出现。下面，我们将深入探讨这个问题，并提供解决方法。
问题探究
首先，我们需要了解这个错误的原因。事实上，这个错误是由于 Jest 中的一个特性引起的。具体来说，Jest 在全局范围内重新定义了浏览器的一些关键方法，例如 document 和 setTimeout，以便使测试更加准确。
然而，这也导致了一些问题，例如在某些情况下，Jest 对对象原型的定义会与 Enzyme 冲突。就像我们在使用 shallow() 方法时所见到的那样。
解决方法
幸运的是，我们可以通过添加一个单元测试配置文件来解决这个问题，而不是每次都在测试代码中手动修复它。
我们可以创建一个名为 jest.config.js 的文件，并添加以下代码:
-------------- - - ------------------- ------------------- --
这里，setupFilesAfterEnv 属性是 Jest 配置文件中的一个属性，可以指定在所有测试运行之前需要运行的脚本。我们使用这个属性来指定一个名为 jest.setup.js 的文件。
接下来，我们需要在 jest.setup.js 文件中添加以下代码:
------ - --------- - ---- --------- ------ ------- ---- -------------------------- ----------- -------- --- --------- ---
这些代码将告诉 Jest 和 Enzyme 使用 React 16 版本的适配器进行测试，并解决我们在使用 shallow() 方法时遇到的问题。
示例代码
以下是一个简单的 React 组件测试示例，包括使用 Enzyme 和 Jest，并解决了 shallow() 方法问题:
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
----------------- ----------- -- -- -
--- --------
------------- -- -
------- - ---------------- ----
---
----------- ----------- -- -- -
----------------------------------
---
-------------- --- ----- ---- --- ------ -- --------- -- -- -
----- ------ - -----------------------
-------------------------
----- ---- - -------------------------
---------------------------- ----
---
---另外，为了完整性和方便，以下是 Counter 组件的代码：
------ ------ - -------- - ---- --------
----- ------- - -- -- -
----- ------- --------- - ------------
----- ----------- - -- -- -
-------------- - ---
--
------ -
-----
----------------
--------- -----------
------- ----------------------------------------
------
--
--
------ ------- --------结论
通过这篇文章，我们学习了如何解决使用 Enzyme 测试 React 组件时遇到的 "shallow(…).not is a function" 问题。这个问题是由 Jest 中的一个重要特性引起的，但我们可以通过添加 jest.config.js 文件和 jest.setup.js 文件来解决它。这个解决方案确保了测试的准确性和可靠性，并可以帮助我们更好地理解 React 组件的测试和优化。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672b6f2eddd3a70eb6d2bbb2