我是靠谱客的博主 干净小天鹅,这篇文章主要介绍【前端知识】单元测试相关内容,现在分享给大家,希望可以做个参考。

@Author:Outman
@Date:2023-01-18

单元测试

单元测试的原则

  • AIR原则
    • A:Automatic(自动化) 不能有对人工操作的依赖
    • I:Independent(独立性) 用例直接不能有逻辑、顺序上的依赖关系
    • R:Repeatable(可重复) 尽可能不依赖外部环境
  • BCDE原则
    • B:Border 边界值测试:循环边界、特殊取值、特殊长度、数据顺序等
    • C:Correct 正确的输入,并得到预期的结果
    • D:Design 与设计文档相结合,来缩写单元测试
    • E:Error 强制错误信息输入(如:非法数据),并得到预期的结果

单元测试的工具

  • Node后端单元测试
    • egg-mock
    • @nestjs/testing
  • 前端单元测试
    • React - Enzyme
    • VUe - @vue/test-utils
  • Enzyme的介绍
    • Airbnb出品,是对React官方测试工具库的封装
    • Shallow Rendering(shallow) 将组件渲染成虚拟VDOM,不渲染所有子组件
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
import { shallow } from 'enzyme'; import Foo from './Foo'; /** * 渲染速度极快 * wrapper对象中包含多种选择器 */ describe('<MyComponent />', ()=>{ it('renders three <Foo /> components',() => { const wrapper = shallow(<MyComponent />); expect(wrapper.find(Foo)).to.have.lengthOf(3); }); });
  • Full Rendering(mount) 将React组件渲染为真实DOM节点
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { mount } from 'enzyme'; import Foo from './Foo'; /** * wrapper是组件实例,也包括选择器 * 需要在 浏览器like 环境下使用 * 移出组件可以使用.unmount() */ describe('<Foo />', ()=>{ it('allows us to set props',() => { const wrapper = mount(<Foo bar="baz" />); expect(wrapper.props().bar).to.equal('baz'); wrapper.setProps({ bar: 'foo' }); expect(wrapper.props().bar).to.equal('foo'); }); });
  • Static Rendering(render) 将React组件渲染成静态HTML字符串
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react'; import { render } from 'enzyme'; /** * wrapper是 Cheerio 实例 * 可以直接对比HTML结构 */ describe('<Foo />', ()=>{ it('renders a div',() => { const wrapper = render(<div className="myClass" />); expect(wrapper.html()).to.contain('div'); }); });

最后

以上就是干净小天鹅最近收集整理的关于【前端知识】单元测试相关内容的全部内容,更多相关【前端知识】单元测试相关内容内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(84)

评论列表共有 0 条评论

立即
投稿
返回
顶部