1.为什么需要单元测试
正确性：测试可以验证代码的正确性，在上线前做到心里有底
自动化：当然手工也可以测试，通过console可以打印出内部信息，但是这是一次性的事情，下次测试还需要从头来过，效率不能得到保证。通过编写测试用例，可以做到一次编写，多次运行
解释性：测试用例用于测试接口、模块的重要性，那么在测试用例中就会涉及如何使用这些API。其他开发人员如果要使用这些API，那阅读测试用例是一种很好地途径，有时比文档说明更清晰
驱动开发，指导设计：代码被测试的前提是代码本身的可测试性，那么要保证代码的可测试性，就需要在开发中注意API的设计，TDD将测试前移就是起到这么一个作用
保证重构：互联网行业产品迭代速度很快，迭代后必然存在代码重构的过程，那怎么才能保证重构后代码的质量呢？有测试用例做后盾，就可以大胆的进行重构
2.前端相关的单元测试技术
2.1 测试框架
目前，前端的测试框架很多，像QUnit、jasmine、mocha、jest、intern等框架，这些框架各有特点，简单描述下，感兴趣的可以具体研究：
Qunit: 该框架诞生之初是为了jquery的单元测试，后来独立出来不再依赖于jquery本身，但是其身上还是脱离不开jquery的影子
jasmine: Behavior-Drive development(BDD)风格的测试框架，在业内较为流行,功能很全面，自带asssert、mock功能
mocha: node社区大神tj的作品，可以在node和browser端使用，具有很强的灵活性，可以选择自己喜欢的断言库，选择测试结果的report
intern: 看官方介绍该测试框架功能极其全面，似乎囊括了业内跟测试相关的所有功能
3.JEST
来自于facebook出品的通用测试框架
Jest是一个令人愉快的 JavaScript 测试框架，专注于简洁明快。
他适用但不局限于使用以下技术的项目：Babel, TypeScript, Node, React, Angular, Vue
优点：
Jest的目标是在大部分JavaScript项目上实现开箱即用，无需配置。
构建能够轻松追踪大Object的测试。快照可以独立于测试代码，也可以集成进代码行内。
测试程序在自己的进程并行运算以最大限度地提高性能。
从it 到 expect - Jest将整个工具包放在一个地方。好书写，好维护，非常方便。
4.开始使用
4.1.create-react-app 3.3.0以上版本
项目中已经集成了test框架，所以无需自己安装，直接使用即可：
testing library介绍：
你想为你的反应组件编写可维护的测试。作为这个目标的一部分，您希望您的测试避免包含组件的实现细节，而是专注于使您的测试为您提供它们所期望的信心。作为其中的一部分，您希望您的测试基础在长期运行中能够维护，这样您的组件的重构(对实现的更改而不是功能的更改)就不会破坏您的测试，从而减慢您和您的团队的速度。
测试越像你的软件的使用方式，他们就能给你更多的信心
这个库提供的实用程序可以像用户那样方便地查询 dom。通过标签文本查找表单元素(就像用户一样) ，从文本中查找链接和按钮(就像用户一样)。它还提供了一种推荐的方法，通过 data-tested 找到元素，作为一种“逃生出口” ，用于那些文本内容和标签没有意义或不实用的元素。这个库鼓励应用程序更易于访问，并允许您让测试更接近于用户使用组件的方式，这使您的测试能够给您更多信心，让您相信当真正的用户使用它时，您的应用程序将正常工作。虽然你可以使用酶本身来遵循这些指导方针，但是执行起来更加困难，因为酶提供了所有额外的实用工具(实用工具可以方便测试实现细节)。在常见问题解答中了解更多。
4.2.编写
create-react-app默认上述几种文件后缀的都为测试文件，创建文件直接编写即可；
以测试Antd的button组件为例：
import React from 'react'
import { render, fireEvent } from '@testing-library/react'
import Button, { ButtonProps } from './button'
const defaultProps = {
onClick: jest.fn()
}
describe('test Button component', () => {
it('should render the correct default button', () => {
const wrapper = render(<Button {...defaultProps}>Nice</Button>)
const element = wrapper.getByText('Nice') as HTMLButtonElement
expect(element).toBeInTheDocument()
expect(element.tagName).toEqual('BUTTON')
expect(element).toHaveClass('btn btn-default')
expect(element.disabled).toBeFalsy()
fireEvent.click(element)
expect(defaultProps.onClick).toHaveBeenCalled()
})
})
运行npm run test
jest官方文档地址：https://jestjs.io/zh-Hans/
testing library地址：https://testing-library.com/docs/react-testing-library/intro
网友评论