在 Enzyme 中使用 createStubbedComponent 渲染 React 子组件-JavaScript中文网-JavaScript教程资源分享门户

在 React 前端开发过程中，我们经常需要通过 Enzyme 这一测试工具来对 React 组件进行测试。为了模拟子组件的行为，我们通常会使用 Enzyme 提供的 shallow 方法来进行测试。但在某些情况下，shallow 方法无法满足的我们的测试需求，例如当我们想要在测试时得到子组件的具体实现时，就需要使用 createStubbedComponent 方法。

那么如何在 Enzyme 中使用 createStubbedComponent 方法呢？下面我们就来详细介绍一下。

createStubbedComponent 方法的介绍

createStubbedComponent 方法是 React Mock 中的一个工具类函数，其用途是允许我们在测试中创建一个具备一部分 React 生命周期方法的 React 组件，从而方便我们进行测试推进。

具体来说，createStubbedComponent 的使用流程如下：

首先我们需要通过 import 方式导入 createStubbedComponent 方法，导入方式如下：
```
import createStubbedComponent from 'react-mock/lib/createStubbedComponent';
```
然后我们可以通过该方法创建具备特定生命周期方法的组件，并通过 props 入参的方式将该组件注入需要测试的父组件中，以此来模拟子组件的行为。
```
const StubbedComponent = createStubbedComponent({ propsToMethods: lifecycleMethods });
const wrapper = shallow(<TestComponent child1={<StubbedComponent />} />);
```

在上述代码中，我们使用了 createStubbedComponent 创建了一个具备特定生命周期方法的子组件 StubbedComponent，并将该组件注入到了需要测试的父组件 TestComponent 中。

createStubbedComponent 方法的示例

下面我们通过一个具体的示例来演示在 Enzyme 中如何使用 createStubbedComponent 方法。

假设我们有一个下拉菜单组件 DropdownMenu，其包含一个子组件 DropdownItem，我们希望能够在测试时对 DropdownItem 组件进行单独测试，需要获取该组件的具体实现。

首先，我们需要通过 createStubbedComponent 方法创建一个具有特定生命周期方法的 DropdownItem 组件:

import createStubbedComponent from 'react-mock/lib/createStubbedComponent';

const StubbedDropdownItem = createStubbedComponent({ propsToMethods: ['onClick'] });

在上述代码中，我们使用 createStubbedComponent 方法生成了一个具备生命周期方法 onClick 的 DropdownItem 组件。

接着，我们可以使用该组件在父组件 DropdownMenu 中进行测试，以获取子组件 DropdownItem 的具体实现：

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------

------------------------ -- -- -
  ---------------- ------ ---- --- ------- -- -- -
    ----- --------- - -
      ------ -
        - ------ ----- --- ------ - --
        - ------ ----- --- ------ - --
        - ------ ----- --- ------ - -
      --
      --------- ---------
    --
    ----- ------- - --------------------- -------------- ----
    ----- ------------ - -------------------------------------

    -- ----
    ----------------------------------------- ----
  ---
---

在上述代码中，我们使用了 Enzyme 的 shallow 方法创建了 DropdownMenu 组件，并查找到其中的第一个 DropdownItem 子组件。然后，我们就可以使用该 dropdownItem 对象进行单独的测试，比如在上述代码中测试了 DropdownItem 是否能够显示其 label。

总结

通过本文的介绍，我们了解了 createStubbedComponent 方法的详细用法，并通过一个具体的示例演示了在 Enzyme 中如何使用该方法。需要注意的是，createStubbedComponent 并不适用于所有的测试需求，在某些情况下，我们仍需要使用 shallow 方法来进行测试。但在需要获取子组件具体实现时，该工具类函数能够给我们带来很大的帮助，有助于提升我们的测试效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6651bf7cd3423812e460f8e6