麻烦的前端测试

前端测试很麻烦,常常功能代码写5分钟,测试代码写2小时。很多时候断言的dom就是找不到,让人摸不到头脑。

但是今天发现(之前也发现过)只要认真写测试了,等过一段时间当你重构(迭代)功能的时候,之前写的测试还是有帮助的,真的会减少一些bug。

就拿今天的例子来说:

目前在对一个既存的功能迭代,这个组件提供filter和sort的功能,而我只改动了sort的代码,但执行测试的时候 filter 的测试 case 却执行失败了。。 失败的断言看起来也和 sort 功能没关系,那么究竟是怎么回事呢。

这次不想再去组件里面一步一个 console.log 或者screen.logTestingPlaygroundURL,实在太耗精力,这次就开动猪脑直接思考:

之前这里测试没问题,加了新需求的代码后测试失败,那100%是新加的代码影响了老的功能。

再仔细看了一下filter处的断言失败的地方,发现这里渲染使用的数据 fields 字段,在sort组件也引用了,而且新加的代码之后还对fields 进行了结构处理。。这下就想到应该是后续处理fields的时候没有deepClone,按照猜测的可能对fields字段deepClone后,之前失败的测试case果然通过了✅✅✅

发表评论

您的电子邮箱地址不会被公开。