前端测试最强教程 - 实现 fake http 和 fake db

news2024/11/17 14:47:51

因为想要写出完美的测试，我们就需要模拟各种接口状态，各种动态数据，要求再高点甚至需要模拟鉴权，那这就不是简单的覆盖方法可以实现的。

所以我们需要一些第三方依赖，下面介绍一下实现步骤。

实现步骤

step 1: 新增业务并进行 case design

为了让便于展示测试，我给网站加了一个新功能，在首页会展示网站的标题并且支持修改，这样就需要一个 get 接口，一个 post 接口，并且还需要数据库。

于是我用 koa 搭了一个后端服务，提供两个接口，数据库我不熟，所以我另辟蹊径，在 notion 上新建了一个 page，通过 notionSDK 来获取和更新 page name，这样就成了我的数据库。

别看我说的简单，其实这一套花了我一个下午，有各种意想不到的问题，比如 koa 如何解析 body、 notion 数据结构太复杂、eslint。

tsconfig 配置的问题等等，期间还错把notion key 给 push 了上去，已经给 disable 了。

具体怎么实现就不细讲了，这不是本系列教程的重点，代码都在github.com/alpacachen/… ，感兴趣可以自己去看一下 server 目录。

总之最后实现的需求大致长这个样子。

对这个需求进行 case design，得到：


G: 网站加载完成

T: 会展示标题 “集成测试框架”

W: 点击修改按钮

T: 会弹出修改弹窗

W: 在输入框中输入 “集成测试框架 2”,点击 “确认修改”

T: 弹窗会关闭，网站标题会更新为“集成测试框架 2”

step 2:完善 app-context，支持xhr

install http-request-mock和lokijs 这两个依赖，重写一下 fake-http-handler.ts这个文件


import HttpRequestMock from 'http-request-mock';// 引入 mock 请求的依赖

import { HupuPostDb, TitleDb } from './fake-db';// 引入提前准备好的 fakedb

const mocker = HttpRequestMock.setup()

// mock一下 hupu 接口，数据从写死改为从 db 中读

mocker.mock({

url: '/hupu/api/v2/bbs/walkingStreet/threads?page=1',

method: 'GET',

body: { data: { threadList: HupuPostDb.find() } },

});

// mock 获取标题的请求

mocker.mock({

url: '/api/title',

method: 'GET',

response: () => {

return TitleDb.findOne().title

}

});

//mo 修改标题的请求

mocker.mock({

url: '/api/title',

method: 'POST',

response(req: { body: { title: unknown; }; }) {

// 找到并更新

const prevTitle = TitleDb.findOne().title;

TitleDb.findAndUpdate({ title: prevTitle }, (d) => {

d.title = req.body.title

})

return {};

}

});

http-request-mock这个依赖应该是国人开发，有优秀的中文文档，大家可以看一下，我就不赘述了github.com/huturen/htt…

新建文件 fake-db.ts


import loki from 'lokijs'

import { FakeHupuData } from './fake-data'

const db = new loki('fake-db')

// 创建虎扑热帖集合

const HupuPostDb = db.addCollection('hupu-post')

// 插入默认数据

HupuPostDb.insert(FakeHupuData)


//创建 title 集合

const TitleDb = db.addCollection('title')

// 插入默认数据

TitleDb.insert({ title: '集成测试教程' })

export { HupuPostDb, TitleDb }

接下来我们只需要在 app-context.ts中引入一下 fake-http-handler.ts，这样我们的集成测试就支持了接口和数据的库查询修改。

step 3: 根据 case借助 ai 补充新的测试

接下来我们试试在测试跑一遍中调用接口获取数据，修改数据，再次获取最新数据这个流程。


describe('W: 点击标题旁边的 修改按钮', () => {

beforeEach(() => {

fireEvent.click(screen.getByTestId('change-title-but'))

})

it('T: 会弹出弹窗，input 中展示 “集成测试教程”', () => {

expect(screen.getByTestId('title-modal')).toBeTruthy()

expect(within(screen.getByTestId('title-modal')).getByDisplayValue('集成测试教程')).toBeTruthy()

})

describe('W: 修改 title 为 “集成测试教程 2” 关闭弹窗', () => {

beforeEach(async () => {

const input = within(screen.getByTestId('title-modal')).getByDisplayValue('集成测试教程')

fireEvent.change(input, { target: { value: '集成测试教程 2' } })

fireEvent.click(screen.getByText('确定修改'))

await vi.advanceTimersToNextTimerAsync();

})

it('T: 弹窗关闭，顶部栏的文案变为“集成测试教程 2”', () => {

// header

expect(screen.queryByTestId('title-modal')).toBeFalsy()

expect(screen.getByTestId('header').innerHTML).toContain('集成测试教程 2')

})

})

})

这里需要强调一下，这个测试我是直接接在了之前的测试后面，很方便而且直观，只就是为什么我在第一章的时候强调写测试规范的问题，如果测试规范，是非常易于维护和新增的，会大大降低写测试的压力，从此形成良性循环