@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
13import { 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
16import { 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
13import 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'); }); });
最后
以上就是干净小天鹅最近收集整理的关于【前端知识】单元测试相关内容的全部内容,更多相关【前端知识】单元测试相关内容内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复