Enzyme 来自 airbnb 公司,是一个用于 React 的 JavaScript 测试工具,方便你判断、操纵和历遍 React Components 输出。
Enzyme 的 API 通过模仿 jQuery 的 API ,使得 DOM 操作和历遍很灵活、直观。Enzyme 兼容所有的主要测试运行器和判断库,文档和例子使用 mocha 和 chai。
使用示例:
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.be.true; }); it('simulates click events', () => { const onButtonClick = sinon.spy(); const wrapper = shallow( <Foo onButtonClick={onButtonClick} /> ); wrapper.find('button').simulate('click'); expect(onButtonClick.calledOnce).to.be.true; });});
简介 Enzyme是由Airbnb开源的一个React的JavaScript测试工具,使React组件的输出更加容易extrapolate 。Enzyme的API和jQuery操作DOM一样灵活易用,因为它使用的是cheerio库来解析虚拟DOM,而cheerio的目标则是做服务器端的jQuery。Enzyme兼容大多数断言库和测试框架,如chai、mocha、jasmine等。 安装与配置 使用
一. Enzyme简述 react测试利器enzyme有三种渲染方式:shallow, mount, render。shallow渲染叫浅渲染,仅仅对当前jsx结构内的顶级组件进行渲染,而不对这些组件的内部子组件进行渲染,因此,它的性能上最快的,大部分情况下,如果不深入组件内部测试,那么可以使用shallow渲染。mount则会进行完整渲染,而且完全依赖DOM API,也就是说mount渲染的结果
本文为enzyme初次学习笔记,持续更新。。。 选择器 css选择器 react组件 function MyComponent() { return <div />; } // find instances of MyComponent const myComponents = wrapper.find(MyComponent); react displayme function MyCo
技术选型 jest: 支持断言、Mock、Snapchat、Async测试、测试覆盖率等 enzyme:模拟了jQuery的APi,比较直观,学习使用都比较简单 测试的原则 测试代码时,只考虑测试,不考虑内部实现 数据尽量模拟现实,越靠近现实越好 对重点、复杂、核心代码,重点测试 利用AOP(beforeEach、afterEach),减少测试代码数量,避免无用功能 测试、功能开发相结合,有利于设
Since the enzyme can make us get easier to update to new version of React and make our test code more lean and maintainable You'd better not use props() to get props from component, because Enzyme doc
问题内容: 我有一个在某些情况下在渲染中返回null的组件: 我想用笑话和酶检查isHidden为true时组件是否为null: 这可行,但是有没有更惯用的方式编写此测试?测试呈现为null的组件是很常见的情况。 问题答案: 而已! 要么:
问题内容: React v15.1.0 Jest v12.1.1 Enzyme v2.3.0 我试图弄清楚如何测试通过单击调用的函数中调用promise的组件。我期望Jest的功能可以在这里为我提供帮助,但似乎并没有执行承诺。 零件: 和测试: 问题答案: 在结束测试之前,不需要太多等待等待的承诺。从您可以看到的代码中,有两种主要的实现方法。 独立测试和您的诺言方法。因此,请检查是否调用了正确的函
问题内容: 我想测试我的React组件是否可以用来从元素中导入用户选择文件的内容。我的以下代码显示了一个工作正常且测试失败的组件。 在我的测试中,我尝试使用Blob代替文件,因为Blob也可以被读取。那是有效的方法吗?我还怀疑问题的一部分是异步的,我的测试需要考虑到这一点。我需要在某个地方许下诺言吗?或者,我是否可能需要模拟使用? 我真的更喜欢只使用标准的React堆栈。特别是我想使用Jest和E
问题内容: 我使用ncurses for UI挑选了在Linux上用C / C ++开发的遗留应用程序。在这种环境下有哪些自动测试工具? 编辑: 过去我使用过AutomatedQA TestComplete,这是我正在寻找的工具类型-除了在Linux上运行之外,并且能够测试Text UI应用程序。 问题答案: 我已经考虑过使用Rational Function Tester和TestComplet
在了解上面的一些React基本概念过后,我们就可以来使用TDD的思想来进行我们开发了。 Create React App默认使用Jest进行测试,所以你需要先安装jest-cli,进入到client根目录: $ npm install jest-cli@20.0.4 --save-dev 注意版本 在安装的时候最好和我这里的版本保持一致,因为其他的版本可能会有其他问题,就需要自己去踩坑了哦~~~
JS 测试 单元测试 - 在计算机程序中, 单元测试是一种软件测试方法, 通过独立的代码单元, 一个或多个计算机程序模块的集合, 和相关联的控制数据, 使用程序和操作过程进行测试, 以确定它们是否适合使用. 直观地说, 可以将一个单元视为应用程序最小的, 可测试的一部分. - Wikipedia 功能测试 - 功能测试是一个质量保证(QA)的过程, 也是一种基于在软件组件测试规范之下的测试案例的黑