前端自动化测试(前端自动化测试和单元测试)
“测试”一个让程序员爱恨交加的阶段，每每提到“测试”，伴随着的总是“BUG”、“缺陷”这些名词。那测试又是什么人来做呢？程序员应该写测试吗？又应该如何做好测试呢？
什么是测试？
在规定的条件下对程序进行操作，以发现程序错误，衡量软件质量，并对其是否满足设计要求进行评估的过程。换句话说就是，测试是一种实际输出与预期输出间的审核或者比较过程。
为什么要做测试？
刚才也说到了，测试时比较实际输出与预期输出的过程。在这个过程中我们可以：
1、保证最终成果符合预期
2、提高代码的质量
3、帮助需求参与者重新梳理流程
4、准确定位问题
5、提升开发者信心和安全感
这是产品上线前的最后一道关卡，如果能这个环节严格把关，及时发现错误，提高代码质量，就能尽量得减少线上的故障率，以及代码的整洁度。
谁来做测试？
在学习前端自动化测试之前我们首先需要搞清楚这个问题。一问到这个问题，90%的人都第一反应都是测试同学进行测试。测试同学应该做测试，这是没错的，但是测试真的仅仅只是测试同学的事吗？
我们仔细想一下，程序员开发出来的软件，谁是第一位接触者。在我们每次提测前，是不是都会自己先把代码跑一遍，至少保证提交的代码基本的功能是正常的，这个其实就是最最基本的一个测试，但是我们通常不怎么当回事。
我们平时可以观察一下测试同学是如何做测试？他们更多的是通过输入A，然后观察是否能够得到结果B，但是对于代码内部的运行逻辑是无法考察的，测试的同学只能从外部的现象来保障正确性，他们没法去review我们的代码，因此所能达到的效果是有限的。那么谁有能填补上这一个空缺的呢——开发者自己。
但是很多又会说，自己开发自己测，你这不是“掩耳盗铃”吗？那就要说到测试模型和开发如何编写测试用例了。
测试模型：蛋卷和金字塔
我在测试时通常按照不同的层次进行划分：将测试分成关注最小程序模块的单元测试、将多个模块组合在一起的集成测试，将整个系统组合在一起的系统测试。
蛋卷模型
有一种直接的做法是，既然更加高层的测试覆盖面越广，那么我们就得写更多的高层测试，比如大量的系统测试，这样就能大范围的覆盖掉底层测试。当然依然有一些底层测试是覆盖不了的，所以我们又单独去写单元测试进行补充，这样我们就会形成这样一个模型：冰淇淋蛋卷
但是这种费时费力，有时一个复杂系统的测试链路是异常麻烦的，这时候我们需要的是换一种思路。
金字塔模型
我们可以看出金字塔模型对比与蛋卷模型来说，是完全反过来的。它有大量的单元测试，然后越往上越少。这时候我们就需要思考为什么会有这种模型了？越是底层的测试，涉及到的逻辑越少，越好写，反而更高层测试涉及得更广，逻辑更复杂。
但是这种模型依然存在问题，因为顶层的系统测试是由基础的单元测试逐步构建成的，但是在实际的工作中，如果底层的模块做了调整，都有可能破坏高层测试，所以高层测试通常是相对脆弱的。
在我们实际测试过程中，高层测试的测试量不会太多，测试覆盖率无论如何都上不来，并且一旦测试错误，想要通过测试结果溯源是非常麻烦的，因为我们的是测试环节多且复杂难以准确定位问题。
如何编写测试
讲了那么多关于测试概念，那开发又应该如何写测试呢？下面我就用一个React项目来介绍一下。
事例项目链接：github.com/Pengjee/pul…
搭建测试环境
create-react-app jest-demo --template-typescript 复制代码
或者直接偷懒，拉事例项目的源码也行。
官方事例讲解
import { render, screen } from '@testing-library/react'; import App from './App'; test('renders learn react link', () => { // 获取DOM节点 render(<App />); // 获取屏幕中文本内容为‘learn react’的节点 const linkElement = screen.getByText(/learn react/i); // 判断节点是否在App中 expect(linkElement).toBeInTheDocument(); }); 复制代码简单组件
下面这是一个简单的计数器的模块代码
const TestDemo = () => { const [num, setNum] = useState(0); return <div> <p>{ num }</p> <button onClick={() => setNum(num + 1)}>增加</button> <button onClick={() => setNum(num - 1)}>减少</button> </div> } 复制代码那么先想一下需要哪些测试case呢？
1、初始值为0
2、点击 “增加按钮”，p标签内变为1
3、点击“减少按钮”，p标签内变为0
我们用上面的测试cast来写一下测试脚本：
import React from 'react' import { render, screen, RenderResult } from '@testing-library/react'; import TestDemo from './TestDemo'; let wrapper: RenderResult // 每次进入新的测试用例都重新渲染一次组件 beforeEach(() => { wrapper = render(<TestDemo />) }) describe('计数器测试', () => { test('测试初始值是否为0', () => { // 获取id是num的dom节点 const numDom = wrapper.getByTestId('num') // 判断dom节点是否在dom树中中 expect(numDom).toBeInTheDocument(); // 判断节点是否为p标签 expect(numDom.tagName).toEqual('P') // 判断节点内容是否为0 expect(numDom.textContent).toEqual('0') }); test('测试增加（减少）逻辑是否为准确', () => { const numDom = wrapper.getByTestId('num') // 获取增加按钮的dom节点 const increaseDom = wrapper.getByText(/增加/i) // 判断节点内容是否为0 expect(numDom.textContent).toEqual('0') // 触发点击事件 fireEvent.click(increaseDom) // 判断节点值是否为1 expect(numDom.textContent).toEqual('1') const decreaseDom = wrapper.getByText(/减少/i) // 触发点击事件 fireEvent.click(decreaseDom) // 判断节点值是否为0 expect(numDom.textContent).toEqual('0') }) }) 复制代码这样一个稍微复杂一点的测试用例就写好了，我们可以发现，在测试用例中我们把每一步都拆解得特别的细，因为我们无法保证我的测试用例写得没有问题，总不可能再写一个测试去测试这个测试用例没有问题吧，既然无法用写程序的方式保证测试的正确性，那我只有一个办法：把测试写简单，简单到一目了然，不需要证明它的正确性。
组件测试
伪原创工具 SEO网站优化 https://www.237it.com/
import React, { useState } from 'react' import { render, fireEvent, screen, act } from '@testing-library/react' import PullToRefresh from '../index' const Demo = (props) => { const [loading, setLoading] = useState(false); const handleRefresh = () => { setLoading(true) setTimeout(() => { setLoading(false) }, 1000) } return <PullToRefresh loading={loading} onRefresh={handleRefresh} data-testid="pull-to-refresh" successText="更新成功" {...props} > <div style={{ height: '100vh' }} data-testid="content"> 测试下拉 </div> </PullToRefresh> } describe('Basic Case', () => { it('Render success', () => { const { getByTestId } = render(<Demo />) expect(() => getByTestId('content')).not.toThrow(/Unable to find PullToRefresh/) }) it('Pulling Status', () => { const { getByTestId } = render(<Demo />) const contentDom = getByTestId('content') fireEvent.touchStart(contentDom, { touches: [{ clientX: 0, clientY: 0 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 10 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 20 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 30 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 40 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 49 }] }) expect(screen.queryByText('下拉更新')).not.toBeNull() }) it('Loosing Status', () => { const { getByTestId } = render(<Demo />) const contentDom = getByTestId('content') fireEvent.touchStart(contentDom, { touches: [{ clientX: 0, clientY: 0 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 10 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 20 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 30 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 40 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 50 }] }) expect(screen.queryByText('松开更新')).not.toBeNull() }) it('Loading Status', () => { const { getByTestId } = render(<Demo />) const contentDom = getByTestId('content') fireEvent.touchStart(contentDom, { touches: [{ clientX: 0, clientY: 0 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 10 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 20 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 30 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 40 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 51 }] }) fireEvent.touchEnd(contentDom) expect(screen.queryByText('更新中...')).not.toBeNull() }) it('Success Status', async () => { jest.useFakeTimers(); const wrapper = render(<Demo />) const contentDom = wrapper.getByTestId('content') fireEvent.touchStart(contentDom, { touches: [{ clientX: 0, clientY: 0 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 10 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 20 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 30 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 40 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 51 }] }) fireEvent.touchEnd(contentDom) // 由于改变了state，所以需要重新获得渲染后的结果，确保在进行任何断言之前，与这些“单元”相关的所有更新都已处理并应用于 DOM act(() => { jest.advanceTimersByTime(1000); }); expect(screen.queryByText('更新成功')).not.toBeNull() }) }) describe('Props Case', () => { it("Change 'disabled' props", () => { const { getByTestId } = render(<Demo disabled />) const contentDom = getByTestId('content') fireEvent.touchStart(contentDom, { touches: [{ clientX: 0, clientY: 0 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 10 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 20 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 30 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 40 }] }) expect(screen.queryByText('下拉更新')).toBeNull() }) it("Change 'text' props", () => { jest.useFakeTimers(); const { getByTestId } = render(<Demo successText="测试成功文本" pullingText="测试下拉文本" loosingText="测试松开文本" loadingText="测试加载中文本" />) const contentDom = getByTestId('content') fireEvent.touchStart(contentDom, { touches: [{ clientX: 0, clientY: 0 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 10 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 20 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 30 }] }) fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 40 }] }) expect(screen.queryByText('测试下拉文本')).not.toBeNull() fireEvent.touchMove(contentDom, { touches: [{ clientX: 0, clientY: 50 }] }) expect(screen.queryByText('测试松开文本')).not.toBeNull() fireEvent.touchEnd(contentDom) expect(screen.queryByText('测试加载中文本')).not.toBeNull() act(() => { jest.advanceTimersByTime(1000); }); expect(screen.queryByText('测试成功文本')).not.toBeNull() }) });
作者：派大星_
链接：https://juejin.cn/post/7035175339558961166