前端测试

自React引入钩子函数以来，我们多了一个总结共享逻辑的选项——自定义钩子。阿里的ahooks是一个很棒的总结分享自定义钩子的例子。 钩子必须在一个React组建中运行。为了避免这个错误，我们要么把react和react-dom给mock了，要么设法包个傀儡组件用于测试。各种头…

接续《react-testing-library快速测试组件渲染》，让我们聊聊怎么测试组件的交互行为——即事件响应。 在《react-testing-library快速测试组件渲染》中，我介绍了通过@testing-library/react的render()返回结果中的元素选…

上回，我在《Jest测试CSS module组件报错怎么办？》一文中提到用Jest mock让Jest跳过对CSS及其他文件的识别转换。这项能力也可以应用于隔离测试中遇到的一些不可控或是不便测试的因素。如： 这些不可控因素会导致我们无法辨别到底是目标测试代码出错，还是由这些因素…

继上回讨论react-testing-library快速测试React组件渲染之后，你可能很快发现在实际使用当中遇到各种问题。比如这个： 这样的用法在JS文件中并不支持，能够这样使用是完全是因为loader在背后做了一系列工作，把这些语句“翻译”成了符合JS用法的语句。而测试框…

继讨论过“前端写不写单元测试”与“React应用测试：配置Typescript, Jest, ESLint”之后，我们开始进入写测试的环节。 没有其他附加的断言库和框架。 组件测试第一步，先看看组件是不是能根据提供的属性正常显示。 测试完美通过。这里用了@testing-lib…

写测试并不是件令人愉快的事情。但我相信程序猿自测是保障质量体系重要的一环，同时是保障自己写完了程序不会再不断被奇怪的问题打扰的重要工具。 相较之下，写测试的不愉快也就算不上啥了。 我实践函数单元测试了挺长一段时间。从强迫自己用宝贵的时间增加少量我已经在浏览器里验证通过的测试开始…

为明年开一个好头，边实践边记录，写个测试系列。 测试的目标为用Typescript写的React应用，测试框架主要是Jest。让我们从配置开始。 安装完后，在package.json边上创建一个tsconfig.json文件配置Typescript。如： include必须包含…