React 组件的错误边界能够捕捉它包裹的组件树的错误，从而保证其自身及其子组件在出现异常时也能够保持稳定运行。如果一个组件是错误边界组件，那么它将在其子组件抛出了异常后被调用到。在进行 React 组件开发时，对于错误边界的测试也是非常重要的一环。在使用 Enzyme 测试组件时，如何测试 React 组件中的错误边界呢？
测试组件的错误边界
在 React 中，错误边界就是一些特殊的组件。当其子组件抛出异常后，这些组件能够捕捉到这些异常，并在渲染这一部分组件时进行相应的操作。在进行 React 组件开发时，我们经常会使用这些错误边界组件来保证组件在发生异常时能够正常处理。
如果我们需要测试某个组件的错误边界，那么我们需要做的事情就是让该组件抛出一个异常，然后验证它的行为。在单元测试中，我们可以为组件编写特定的测试用例，以此来捕捉异常情况并针对性地测试错误边界的行为。
但是在实际的开发场景中，我们很难手动地抛出一个异常来进行测试。这里，我们可以利用 Enzyme 来模拟与测试错误边界组件的行为。
如何使用 Enzyme 测试 React 组件中的错误边界
在使用 Enzyme 测试 React 组件中的错误边界时，我们需要注意以下几点：
- 生成一个包含错误的 React 组件
- 渲染该组件并断言是否能够捕捉到异常
下面，我们来详细了解这两个步骤的实现。
生成一个包含错误的 React 组件
在 React 组件中，如果我们采用以下方式来进行错误处理：
-- -------------------- ---- -------
----- ------------- ------- --------------- -
------------------ -
-------------
---------- - - --------- ----- --
-
------ ------------------------------- -
------ - --------- ---- --
-
------------------------ ---------- -
-------------------- -----------
-
-------- -
-- --------------------- -
------ ------------- ---- ------------
-
------ --------------------
-
-那么在进行单元测试时，我们只需要把这个组件渲染出来，然后使用 Enzyme 就可以检测到子组件中发生的错误信息：
-- -------------------- ---- -------
------------------------- -- -- -
----- ----- - --- ----------- --------
----- ------------------ - -
---------------
------------------- --
----------------
--
---------- ----- --- ----- --- ------- - -------- ---- -- -- -
----- ------- - --------------------------
------------------------------------------------------
------------------------------------- ---- -------------------------
---
---解释：
- 首先，我们需要创建一个
ErrorBoundary组件并设置它的状态 - 然后，在
getDerivedStateFromError和componentDidCatch中处理错误信息 - 最后，在
render中设置hasError属性并根据其值返回对应的界面
接下来，我们需要针对这个组件编写一个单元测试。在这个测试中，我们需要模拟一个 ComponentWithError 子组件的错误，并断言 ErrorBoundary 组件是否能够正确地处理该错误并显示义务逻辑。
渲染该组件并断言是否能够捕捉到异常
在渲染包含错误边界的 React 组件时，我们需要注意以下几点：
- 使用
mount替代shallow，使得能够捕捉到组件内部的错误信息 - 使用
simulateError方法来模拟一个错误，并验证错误信息的捕捉及处理
下面是一个例子：
-- -------------------- ---- -------
------ - ----- - ---- ---------
----- ------------------ ------- --------------- -
------------------ -
-------------
---------- - -
----------- ------
--
-
-------- -
-- ----------------------- -
----- --- ---------------
-
------ -
-----
------- ----------- -- --------------- ----------- ---- ----
----- -----
---------
------
--
-
-
------------------------------ -- -- -
--- ---------------------
------------- -- -
-------------------- - ------
---------------
------------------- --
----------------
--
---
---------- ------ --- ------------- ----------- -- -- -
-------------------------------------------------
---
---------- ----- -- ----- --- ------- --- -------- ---- -- -- -
----- ------ - ------------------------------------
-------------------------
------------------------------------------------------ ---- ---------
---
---在上面的代码中，我们首先引入了 mount 方法，来模拟渲染一个包含错误边界的组件。接着，我们创建了一个 ComponentWithError 组件，并在其中模拟一个错误：
if (this.state.throwError) {
throw new Error('Error');
}然后我们使用 beforeEach 来每次都重新渲染错误边界组件：
beforeEach(() => {
ErrorBoundaryWrapper = mount(
<ErrorBoundary>
<ComponentWithError />
</ErrorBoundary>
);
});最后，我们使用 simulate 方法来模拟这个错误，并验证它是否能够正确地被捕捉到：
const button = ErrorBoundaryWrapper.find('button');
button.simulate('click');
expect(ErrorBoundaryWrapper.text()).toEqual('Something went wrong.');当然，如果你需要更加详细的组件测试示例，可以参考 Jest 官方文档。
总结
使用 Enzyme 进行单元测试时，我们可以通过模拟错误边界组件的行为来测试其错误处理能力。在进行测试时，我们需要注意使用 mount 方法来进行渲染，并使用 simulateError 方法来模拟子组件中的错误。通过合理准确的测试能够保证我们的组件及错误边界能够在任何情况下保持稳定的运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c42b2968c7c53b075fad1