前端测试最强教程 - vitest实现react集成测试

最新推荐文章于 2024-06-05 15:27:12 发布

爱吃香菜

最新推荐文章于 2024-06-05 15:27:12 发布

阅读量640

点赞数 18

分类专栏：程序员程序人生软件测试文章标签：集成测试软件测试自动化测试程序员面试职场经验前端测试

本文链接：https://blog.csdn.net/wx17343624830/article/details/138158429

版权

软件测试同时被 3 个专栏收录

2817 篇文章 34 订阅

订阅专栏

程序人生

2644 篇文章 26 订阅

订阅专栏

程序员

2467 篇文章 2 订阅

订阅专栏

2024软件测试面试刷题，这个小程序（永久刷题），靠它快速找到工作了！（刷题APP的天花板）_软件测试刷题小程序-CSDN博客文章浏览阅读3.3k次，点赞86次，收藏15次。你知不知道有这么一个软件测试面试的刷题小程序。里面包含了面试常问的软件测试基础题，web自动化测试、app自动化测试、接口测试、性能测试、自动化测试、安全测试及一些常问到的人力资源题目。最主要的是他还收集了像阿里、华为这样的大厂面试真题，还有互动交流板块……_软件测试刷题小程序编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502编辑https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502https://blog.csdn.net/AI_Green/article/details/134931243?spm=1001.2014.3001.5502

上文写了一个组件的单测，实现了 100%覆盖率，接下来就引出了另一个问题，如何覆盖所有的代码？每个组件写一个单测？每个都 mock 一遍？

这是所有尝试开始写测试的同学遇到的最头疼的问题，无穷无尽的 mock和样板代码。并且有的组件内部函数还很难被调用到，需要抽成 util 再写一个单测。

这个问题我之前也遇到了，解决的办法就是集成测试。

集成测试（英语：Integration testing），又称组装测试，即对程序模块采用一次性或增值方式组装起来，对系统的接口进行正确性检验的测试工作。

整合测试一般在单元测试之后、系统测试之前进行。

实践表明，有时模块虽然可以单独工作，但是并不能保证组装起来也可以同时工作。

那么接下来我们就来实现一个集成测试的架子。其实 react应用就是由无数个小组件构成的大组件，那么我们直接在测试里面 render 整个 App 不就行了吗？非常简单。

step 1: 在测试目录新建文件 app-context.tsx

这个文件的作用就是统一测试架构的上下文，并且能够统一管理。

我就直接贴代码了，通过注释来介绍每一行的作用。

由于我们的测试项目非常简单，所以这个上下文也非常简单。真实项目的上下文肯定是这个代码量的几十几百倍，并且构造起来也是很困难的。

// app-context.tsx
import { MemoryRouter } from 'react-router-dom' // react-router 在测试中需要使用 MemoryRouter 来替换 BrowserRouter 
import APP from '../App' // 应用入口
import { render, cleanup, within } from '@testing-library/react' // react 测试依赖
import { vi } from 'vitest' // vitest 的工具函数集，提供了常用的方法，比如 mock spy timer 等
import { fakeHttpHandler } from './fake-http-handler' // mock 接口的返回数据
vi.useFakeTimers() // 代理定时器相关
window.fetch = fakeHttpHandler // 重写 window.fetch
export const createAppContext = () => {
    // 整个应用
    const container = render(<MemoryRouter>
        <APP />
    </MemoryRouter>)
    // 抽一些常用的方法
    const inSideBar = () => {
        return within(container.getByTestId('side-bar'))
    }
    return {
        container,
        inSideBar,
        cleanup,
    }
}
// 导出 appContext 的类型
export type AppContext = ReturnType<typeof createAppContext>

// fake-http-handler.ts
// 重写一个 fetch 方法，让它能能够写死返回需要的数据
import { fakeResponse } from "./fake-response"

export const fakeHttpHandler = async (...args: Parameters<typeof fetch>) => {
    console.log(args[0])
    const res = {
        json: async () => {
            return { data: fakeResponse[args[0] as string] }
        },
    } as Awaited<ReturnType<typeof fetch>>
    return res
}
// fake-response.ts
// 我直接把当时接口的返回值 copy 下来。
export const fakeResponse: Record<string, object> = {
    '/hupu/api/v2/bbs/walkingStreet/threads?page=1':{
        threadList: [data1,data2,...]
    }
}

写完这几个文件后，最简单版集成测试的的框架已经搭好了，接下来就可以愉快的写测试了。

step2: 写集成测试

通过我们封装的这个上下文，创建一个测试就非常简单了，大致的样板代码为：

import { afterEach, beforeEach, vi, describe, expect, it } from "vitest";
import { AppContext, createAppContext } from "../app-context";
describe('G: 加载应用', () => {
    let _: AppContext
    beforeEach(() => {
        _ = createAppContext()
    })
    afterEach(() => {
        _.cleanup()
    })
    describe('W: 数据加载中', () => {
        it('T: 会展示 loading', () => {})
            describe('W: 数据加载完成', () => {
                it('T: 会展示文件列表', () => {})
            })
    })
    
})

然后我们对整个应用做 GWT case design，做完之后开始写测试代码，现在借助 AI 功能，写测试代码是非常快的，如果你的测试框架搭建的足够完善，AI 生成的代码准确度就越高，我们只需要做一些小修改即可，比如如何等待异步事件结束，如何模拟用户事件等。

此处不再赘述，代码在这里，一共 50 行。 github.com/alpacachen/…

这两步结束后我们就有了第一个集成测试的 test case。跑一下测试覆盖率看看。