enzyme之shallow渲染

shallow rendering可以把组件当做一个单元来测试,而且确保不会因为子组件的行为而直接出现断言(Shallow rendering is useful to constrain yourself to testing a component as a unit, and to ensure that your tests aren't indirectly asserting on behavior of child components.)

import { shallow } from 'enzyme';

describe('<MyComponent />', () => {

  it('should render three <Foo /> components', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Foo)).to.have.length(3);
  });

  it('should render an `.icon-star`', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('.icon-star')).to.have.length(1);
  });

  it('should render children when passed in', () => {
    const wrapper = shallow(
      <MyComponent>
        <div className="unique" />
      </MyComponent>
    );
    expect(wrapper.contains(<div className="unique" />)).to.equal(true);
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = shallow(
      <Foo onButtonClick={onButtonClick} />
    );
    wrapper.find('button').simulate('click');
    expect(onButtonClick.calledOnce).to.equal(true);
  });

});

shallow(node[, options]) => ShallowWrapper

参数

  1. node (ReactElement)要渲染的节点

  2. options (对象 [可选]):

  3. options.context: (对象 [可选]): 传给组件的Context

返回

ShallowWrapper:这是一个cheerio的解析对象

API

  • .find(selector) => ShallowWrapper
    找到所有匹配的节点

  • .findWhere(predicate) => ShallowWrapper
    找到所有渲染树下满足函数内判断的节点

  • .filter(selector) => ShallowWrapper
    过滤匹配的节点

  • .filterWhere(predicate) => ShallowWrapper

  • .contains(nodeOrNodes) => Boolean

  • .containsMatchingElement(node) => Boolean

  • .containsAllMatchingElements(nodes) => Boolean

  • .containsAllMatchingElements(nodes) => Boolean

  • .equals(node) => Boolean

  • .matchesElement(node) => Boolean

  • .hasClass(className) => Boolean

  • .is(selector) => Boolean

  • .isEmpty() => Boolean

  • .not(selector) => ShallowWrapper

  • .children() => ShallowWrapper

  • .childAt(index) => ShallowWrapper

  • .parents() => ShallowWrapper

  • .parent() => ShallowWrapper

  • .closest(selector) => ShallowWrapper

  • .shallow([options]) => ShallowWrapper

  • .render() => CheerioWrapper

参照这里,不一一列举,方法和jQuery


前端左右
从事前端工作期间笔记
222 声望
18 粉丝
0 条评论
推荐阅读
从经典面试题看var与let
var是在全局范围有效,所以执行setTimeout里的函数时,先是在函数内部寻找 index 变量,没有找到,所以去外层找,找到!这时index已经执行完循环,所以值为5;而let则是声明在for循环的内部的,每一次for循环,一...

chezhe2阅读 3.4k

给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...

熊的猫19阅读 2.6k

封面图
你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!

熊的猫14阅读 1.7k

封面图
2022 你还不会微前端吗 (上) — 从巨石应用到微应用
微前端系列分为 上/下 两篇,本文为 上篇 主要还是了解微前端的由来、概念、作用等,以及基于已有的微前端框架进行实践,并了解微前端的核心功能所在,而在下篇 2022 你还不会微前端吗 (下) — 揭秘微前端核心原理...

熊的猫14阅读 1.7k

封面图
大前端必备书籍
为了方便前端开发者系统学习前端知识,搜集了前端系列电子书,帮助开发者系统梳理知识体系,深入理解前端技术。更多书单请关注Github[链接] 。CSS权威指南(第四版)上册百度云CSS权威指南(第四版)下册百度云CSS揭...

码出世界14阅读 1.4k

【WebRTC 跨端通信】React + React Native 双端视频聊天、屏幕共享
之前介绍过 WebRTC,简单来说它是一个点对点的实时通讯技术,主要基于浏览器来实现音视频通信。这项技术目前已经被广泛应用于实时视频通话,多人会议等场景。

杨成功13阅读 1.7k评论 1

封面图
2022 你还不会微前端吗 (下) — 揭秘微前端核心原理
在上篇 2022 你还不会微前端吗 (上) — 从巨石应用到微应用 中已经了解了微前端的由来和基本使用,也提到了一些相关的原理,本篇文章为下篇主要从原理层面进行解析,然后再自己实现一个包含核心部分的微前端框架。

熊的猫8阅读 1.1k

封面图
222 声望
18 粉丝
宣传栏