您的位置:首页 >聚焦 >

简讯:前端单元测试,更进一步

2022-11-29 21:45:51    来源:程序员客栈
前端测试@2022

如果从 2014 年 Jest 的第一个版本发布开始计算,前端开发领域工程化的单元测试能力已经发展了八年有余。


(相关资料图)

Jest 集成了 Jasmine 等以往各种被证明有效的单元测试框架和断言等工具,也可以用来完成包含外部接口服务的集成测试等。

最近几年热门的 vite 打包工具配套的 vitest,也是完全兼容 Jest 工具栈的;除了本身相比于 Jest 带来了比较大的性能提升之外,vitest 还提供了更好的 ESM 等支持。一般也用 @testing-library来搭配 vitest,提供 DOM 等核心测试能力。

Storybook则在浏览器环境中,为 UI 组件的单独编写和测试提供了可视化的、可交互的、与具体业务项目无关的单独运行环境;无论是 web 项目还是混合式的桌面应用,都可以不理会繁复的项目配置和依赖,把组件级别的开发在 Storybook 中快速完成。

在测试分层金字塔模型中,最终还需要立足真实业务项目的 UI 测试,也就是终端用户(或 QA 测试人员)到终端设备的 E2E(end to end) 测试。

一般所说的 自动化测试 指的大都是对于 E2E 测试的自动化。Selenium 是自动化测试的常用工具,但新兴的 Playwright显然得到了越来越多的青睐;后者还能更好地支持 electron 等桌面开发项目。

play 一下

在开发实践中对比几种测试,Jest/vitest 单元测试易于开发人员编写,但其运行在命令行下,不够直观;而 Storybook 展示直观,却大部分只能靠开发者人工检查其有效性,由于无法集成到 pre-commit 等开发流程中,也容易重蹈早期 Jasmine 等基于浏览器页面单测用例的覆辙 -- 编写简单但很容易过时失效。

较新版本的 Storybook 中引入了 交互式测试(Interaction Test) 的概念,用法也极为简单,只需要为既有的 UI 用例编写一个 play()函数 就可以了。

//LoginForm.stories.js|jsximportReactfrom"react";import{within,userEvent}from"@storybook/testing-library";import{expect}from"@storybook/jest";import{LoginForm}from"./LoginForm";exportdefault{title:"Form",component:LoginForm,};constTemplate=(args)=>;exportconstEmptyForm=Template.bind({});exportconstFilledForm=Template.bind({});//为具名用例增加play()FilledForm.play=async({canvasElement})=>{constcanvas=within(canvasElement);//复用单测中的testing-library库模拟用户行为awaituserEvent.type(canvas.getByTestId("email"),"email@provider.com");awaituserEvent.type(canvas.getByTestId("password"),"a-random-password");awaituserEvent.click(canvas.getByRole("button"));//直接用jest/vitest等提供的断言函数awaitexpect(canvas.getByText("Everythingisperfect.Youraccountisreadyandweshouldprobablygetyoustarted!")).toBeInTheDocument();};

类似单测在命令行中的红绿结果,交互式测试的每个步骤、其成功失败,都会显示在相应的面板中:

复用测试用例

不难发现,工具栈相同、写法无异,play 函数对于习惯了写单元测试的前端开发者来说并不陌生,或者可以说是零门槛的,play 函数中的代码就是标准的单测代码。那么我们也没有任何理由让这部分测试代码游离在覆盖率统计之外,或是再去单测中编写重复的代码了。

需要做的也非常简单,直接在单测中 import 后 play 就是了:

//foo.spec.jsximport{render}from"@testing-library/react";import{FooUISpec}from"../Foo.stories";it("Checksbystorybook",async()=>{const{container}=render();awaitFooUISpec.play({canvasElement:container});});

总结

现在,我们可以让 Storybook 和单元测试分享测试用例,甚至可以在 Playwright 中调用 Storybook 服务后再编写自动化测试 -- 后者这里不展开讨论了;总之,测试工具的发展,给了前端开发者更直观编写测试用例的手段,最终也更好地保证了前端项目的开发质量,以及代码编写的合理性。

关键词: 单元测试 自动化测试 测试用例

相关阅读