Enzyme dive() 和 shallow() 的区别

本文主要是介绍Enzyme dive() 和 shallow() 的区别，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

ShallowWrapper API 中有两个易混的 .dive() 和 .shallow()，调用它们都会返回 ShallowWrapper，但他们在使用场景和执行过程中都有所区别。

API 定义

• .dive([options]) => ShallowWrapper

  Shallow render the one non-DOM child of the current wrapper, and return a wrapper around the result.

  non-DOM child 指的是 非 dom 的 reactElement（不能是 div span 等）

• .shallow([options]) => ShallowWrapper

  Shallow renders the current node and returns a shallow wrapper around it.

源码解析

• .dive() 源码

  dive(options = {}) {
    const adapter = getAdapter(this[OPTIONS]);
    const name = 'dive';
    return this.single(name, (n) => {
      if (n && n.nodeType === 'host') {
        throw new TypeError(`ShallowWrapper::${name}() can not be called on Host Components`);
      }
      const el = getAdapter(this[OPTIONS]).nodeToElement(n);
      if (!isCustomComponentElement(el, adapter)) {
        throw new TypeError(`ShallowWrapper::${name}() can only be called on components`);
      }
      const childOptions = makeInheritedChildOptions(this, options);
      return this.wrap(el, null, childOptions);
    });
  }

• .shallow() 源码

  shallow(options = {}) {
    return this.single('shallow', (n) => {
      const childOptions = makeInheritedChildOptions(this, options);
      return this.wrap(getAdapter(this[OPTIONS]).nodeToElement(n), null, childOptions);
    });
  }

我们可以将 .dive() 源码稍作变化：

dive(options = {}) {
  return this.single('dive', (n) => {
    // 错误判断-start
    if (n && n.nodeType === 'host') {
      throw new TypeError(`ShallowWrapper::${name}() can not be called on Host Components`);
    }
    const el = getAdapter(this[OPTIONS]).nodeToElement(n);
    const adapter = getAdapter(this[OPTIONS]);
    if (!isCustomComponentElement(el, adapter)) {
      throw new TypeError(`ShallowWrapper::${name}() can only be called on components`);
    }
    // 错误判断-end
    const childOptions = makeInheritedChildOptions(this, options);
    return this.wrap(getAdapter(this[OPTIONS]).nodeToElement(n), null, childOptions);
  });
}

通过对比变体后的 .dive() 和 .shallow() 对比，如果去掉错误判断部分，我们可以看到，.dive() 的逻辑和 .shallow() 一样。通常，.dive() 配合高阶组件一起使用，如在 Enzyme 仓库这个 issue 中 Documentation does not make it clear when to use .dive() vs .shallow() ，@Jordan Harband 提到

.dive() is sugar for "throw if there's more than one child, throw if that child isn't a custom component, call .shallow on it". It was a common enough pattern that it warranted first-class inclusion.
In particular, the mantra i often use is "when shallow rendering, one .dive() per HOC"

如果仅从功能来看，能用 .dive() 的场景同样可以使用 .shallow() ，且结果一样。

但 .dive() 内部做了更加严格的类型判断（不能是 Host Components，且必须是自定义的 components。对 web 而言，div 等原生 html DOM 元素，以及 null 或者 react 内建组件 <Fragment> 都不行），并且，在高阶组件中使用，语义也更加友好：dive 到高阶组件包裹的自定义组件中（后文有例子）。

With respect to renderers there are two types of react components:
Host Components: Host components are platform-specific components, such as <div> or a <View> and they run platform-specific code such as mounting, updates, and unmounting of DOM/Native view. They typically begin with lower-case in the case of ReactDom.
Composite Components: Composite components are user-defined components such as <MyButton> or <Content> and they behave the same way with all renderers. React will calls methods, such as render() and componentDidMount(), on the user-supplied composite components.

使用场景

宿主对象类型

.dive() 只能用于非 DOM 的 wrapper，而 .shallow() 没有此限制，如果成功输出 ShallowWrapper，结果都一样。看下面代码：

test('试验', () => {
  class Bar extends React.Component {
    render() {
      return (
        <div>
          <div className="in-bar" />
        </div>
      );
    }
  }

  class Foo extends React.Component {
    render() {
      return (
        <div>
          <Bar />
        </div>
      );
    }
  }

  const wrapper = shallow(<Foo />);

  // 因为浅渲染，Bar 在当前 wrapper 中只会渲染成 <Bar />，所以找不到其包含的 '.in-bar'
  expect(wrapper.find('.in-bar').length).toBe(0);

  // 这里找到的 Bar 是 <Bar />
  expect(wrapper.find('Bar').length).toBe(1);

  // 对 '<Bar />' 使用 dive() 后，将会渲染它，然后就可以找到 '.in-bar'了
  expect(wrapper.find('Bar').dive().find('.in-bar').length).toBe(1);
  // 这里可以使用 shallow() 效果相同
  expect(wrapper.find('Bar').shallow().find('.in-bar').length).toBe(1);

  // dive() 只能应用于 非 DOM
  console.log(wrapper.find(Bar).dive().find('.in-bar').dive().debug()); // 报错，不能对 dom 使用
  console.log(wrapper.find(Bar).dive().find('.in-bar').shallow().debug()); // 正常输出 html
});

.dive() only works on a wrapper around a single element from a custom component. If you want to shallow on an HTML element, or multiple, you'd need .shallow(). I think the use cases are rare, but they exist. by @Jordan Harband

配合高阶组件使用

const withHOC = Component => props => (
  <Component testHOCProp="come from HOC" {...props} />
);
class Bar extends React.Component {
  render() {
    return (
      <div>
        <div className="in-bar" />
      </div>
    );
  }
}
class EnzymeDive extends React.Component {
  shouldComponentUpdate() {
    console.log(1111);
  }
  render() {
    return (
      <div>
        Enzyme Dive
        <Bar />
      </div>
    );
  }
}

test('Enzyme .dive() with HOC', () => {
  const wrapper = shallow(<EnzymeDive />);
  wrapper.dive().setProps();

  console.log('====wrapper.debug()====', wrapper.debug());
  console.log('====wrapper.dive().debug()====', wrapper.dive().debug());
});

test('Enzyme .shallow() with HOC', () => {
  const wrapper = shallow(<EnzymeDive />);
  wrapper.shallow().setProps();

  console.log('====wrapper.debug()====', wrapper.debug());
  console.log('====wrapper.dive().debug()====', wrapper.shallow().debug());
});

两个测试用例 Enzyme .dive() with HOC 和 Enzyme .shallow() with HOC 输出的结果都一样，且对于 EnzymeDive 组件而言，测试覆盖率都达到了 100%。其中

• wrapper.debug() 的输出结果为：

<EnzymeDive testHOCProp="come from HOC" />

• wrapper.dive().debug() 和 wrapper.shallow().debug() 的输出结果为：

<div>
  Enzyme Dive
  <Bar />
</div>

可以看到 .dive() 和 .shallow() 都 "unwrap" 了高阶组件（"unwrap" here just means "shallow-render one level deeper" ）。

测试源码可以在这里找到。

结论

如果宿主对象不是 div 等原生 html DOM 元素，使用哪个功能一样。但如 Enzyme（3.11.0）源码注释所写，如果是高阶组件，推荐使用 .dive()，其他场景，使用 .shallow()。

参考资料

Documentation does not make it clear when to use .dive() vs .shallow()

这篇关于Enzyme dive() 和 shallow() 的区别的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！