讲师中心 微信公众号
AI工具推荐 视频效率加速

有效的前端测试

浅明君_9639

浅明君_9639

发布时间:2024-09-14 08:03:02

|

606人浏览过

|

来源于dev.to

转载

有效的前端测试

面试已经有一段时间了。在这个痛苦的过程中最突出的是,如果提出测试问题,面试就注定失败。这是因为我的经验主要是前端开发,而我待过的两家公司在前端测试方面都很差。

--- 如果想直接进入讨论请跳过---

从某种意义上说,我的缺乏是行业文化的副产品。前端测试一直是一件事,但十年前,公司结构已经将测试问题与开发过程分开。因此,我们有一个专门的 QA 团队,他们将为我们的开发人员编写 E2E/自动化测试。所以测试甚至没有出现在工作描述中。此外,小型初创公司的不幸事实是交付始终高于一切,因此由于测试会阻碍生产力,因此我们开发人员没有进行测试。我们甚至没有在存储库中安装任何测试库(Jasmine/Mocha/PhantomJS...)。

我在一家更大的公司找到了第二份工作(消费者平台团队有大约 150 名开发人员?)。然而,从本质上讲,并没有进行任何测试。每个团队(按结帐、忠诚度、注册等功能划分的团队)再次有专门的 QA 成员来编写这些 E2E 测试。一旦这种文化形成并且质量保证从预算中削减,就没有人接受它们,因为没有人可以向他们学习。我试图为我们的团队进行一些 E2E 测试,但留下的代码甚至无法正常工作,而且充满了明显的错误(很多 WTF)。再加上时间紧迫,测试又落后了。人们唯一一次谈论测试是实用函数和自定义反应钩子。

立即学习“前端免费学习笔记(深入)”;

---讨论开始---

受到无测试文化的困扰,我至少必须想出一些我可以在面试中抽象地谈论测试的东西。我将跳过不测试样式或实现之类的常见废话。

请随意添加到讨论中。这影响了我至少 300 名过去的同事!

1.) 测试全局状态:
根据我的经验,最粗糙的功能之一是“如果发生这种情况,我们会自动为您执行此操作”类型的行为。例如,我拥有的一个应用程序是一个可高度配置的图形可视化仪表板。一项配置更改可能会导致其他配置也发生更改,具体取决于返回的数据以及未返回的数据。一些配置副作用并不直接。因此,您需要测试自动配置更改以及状态是否全面持久/未更改/一致。因此,如果您围绕此类行为进行测试,与 PM、经理、设计和 QA 团队保持一致是非常有价值的。

2.)不要花太多时间测试 UI 输入的完整性:
我看到很多教程都在谈论测试输入,例如当我在搜索栏中输入“泰勒·斯威夫特”并按 Enter 键时,我们的搜索功能将获得泰勒·斯威夫特作为输入。

这完全没有帮助。如果您的数据绑定被破坏,那么很明显您应该在开发时自己捕获它,或者它不能自动测试,因为某些东西阻碍了功能,例如搜索栏上方的不可见 div,因此用户无法输入搜索。

如果你是通过代码行付费的,那就继续吧:)

3.)测试输入作为输入的副作用是可取的:
与第二点相反,您需要测试对用户交互完全产生副作用的功能调用。例如,当用户单击按钮时,应调用请求来注册该用户操作以进行数据分析。这种与核心功能完全分离的副作用应该自动测试,这样我们就不会因一些无意的更改而措手不及。非核心副作用对于其他团队来说可能是至关重要的,我曾在其他团队之一中工作:D

那么如何构建这些测试需求呢?
让我们分解一下前端架构:MVC(你可以说你是 MVVM 或者什么不是,这并不重要)。

V - 视图 (html/jsx): 这非常适合 E2E/无头浏览器测试,并且是行业标准。

C - 控制器(业务逻辑):花一些时间确保功能正确。例如,如果您具有/抽象为纯函数,那么预期的输入输出过程是否仍然完好无损?有点行业标准,但人们通常不会费心将有状态函数变成纯函数并进行测试。

M - 模型(api 调用/状态): 这是我最想关注的。您的(非渲染)状态应该是全局的并且每个概念都是单例的。这不是什么新想法,因为 Redux 基本上就是这样。然而,出于我们的测试目的,它不一定是 Flux。您可以拥有 jotai 原子,但您可以编写一个包装器,以便可以公开集中的 setter 函数进行测试。

应该在您的 api 调用/第三方库上执行类似的操作。它应该是全局的和单例的,以便您可以自信地测试“当我这样做时,是应用程序中进行的核心/非核心 api 调用”。以我有限的经验,这是在后端应用程序中例行完成的。它也应该在前端应用程序中完成。

这听起来怎么样?我确信已经有人这样做了,你的经验是什么?有什么可以改进的?我很想听听人们的意见,他们认为前端测试不仅仅是 E2E/无头浏览器和简单的单元测试。

热门AI工具

更多
Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
PHP 命令行脚本与自动化任务开发
PHP 命令行脚本与自动化任务开发

本专题系统讲解 PHP 在命令行环境(CLI)下的开发与应用,内容涵盖 PHP CLI 基础、参数解析、文件与目录操作、日志输出、异常处理,以及与 Linux 定时任务(Cron)的结合使用。通过实战示例,帮助开发者掌握使用 PHP 构建 自动化脚本、批处理工具与后台任务程序 的能力。

506

2025.12.13

Figma AI自动化智能数据填充与交互生成实战
Figma AI自动化智能数据填充与交互生成实战

告别机械重复,详细演示如何用 AI 填充业务真实数据,并自动为页面添加交互连线,将静态设计稿快速转变为动态原型。

345

2026.05.13

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

0

2026.11.05

DBeaver安全防护教程大全
DBeaver安全防护教程大全

DBeaver安全防护专题,围绕数据库连接安全、账号密码保护和访问权限管理展开,整理SSL/TLS加密连接、SSH隧道、数据库凭据保存及证书验证等配置方法,同时介绍敏感信息保护、远程连接风险和高权限账号使用等注意事项,帮助用户提高数据库日常管理的安全性。

0

2026.11.05

DBeaver连接创建与配置教程
DBeaver连接创建与配置教程

本专题聚焦DBeaver数据库连接配置与管理,覆盖从新建连接、选择数据库类型到填写连接参数和验证连接的完整流程。针对MySQL、PostgreSQL、SQL Server等常见数据库,整理相应的连接设置方法,并提供驱动缺失、认证失败和连接异常等问题的排查方向。

0

2026.11.04

XORM框架结构体映射与表结构同步
XORM框架结构体映射与表结构同步

本专题围绕XORM框架的结构体映射展开,说明表名与字段的命名策略、xorm标签常用属性、主键自增与时间字段自动填充,并演示Sync2自动建表、增量字段升级、索引声明与反向生成结构体的完整流程。

0

2026.11.04

XORM框架安装配置与数据库连接
XORM框架安装配置与数据库连接

本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

0

2026.11.04

XORM框架安装配置与数据库连接
XORM框架安装配置与数据库连接

本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

0

2026.11.04

XORM框架安装配置与数据库连接
XORM框架安装配置与数据库连接

本专题聚焦XORM框架的配置与连接环节,拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择,讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式,并补充容器与兼容数据库的适配经验。

0

2026.11.04

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
MyEclipse学习中心
MyEclipse学习中心

共0课时 | 0人学习

vscode手册
vscode手册

共0课时 | 0人学习

CSS3 教程
CSS3 教程

共18课时 | 16.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn