【前端知识】单元测试相关内容

@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，不渲染所有子组件

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节点

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字符串

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');
    });
});

最后

以上就是干净小天鹅为你收集整理的【前端知识】单元测试相关内容的全部内容，希望文章能够帮你解决【前端知识】单元测试相关内容所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。