You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
import React from 'react';
import Component from './Component';
test('does not do something completely embarassing if I forgot to pass a name', () => {
const { getByText } = render(<Component />);
expect(getByText('Name: ')).not.toBeInTheDocument();
});
原文链接
引言
在第一部分,我们基于
create-react-app
构建了项目的基础结构。对于一个组件库来说,不仅要有简单,实用的组件,每一个组件的质量也是至关重要。而单元测试,正是提升软件质量的一种有效的手段。在本文中,不仅会在之前的项目中完成单元测试的配置,还会带着大家一起走进单元测试的世界~教程部分
本篇文章,是这个系列的第二篇 - 单元测试
2020到了,我还需要单元测试吗?
首先,告诉大家一个小秘密,就是我不太喜欢单元测试。它很费时,重构项目会变得很吃力。而且,单元测试没有一个明确的边界,有时总会觉得自己的单元测试写的不够。而且,代码也并不会因为单元测试就不会出现
BUG
,即使你的测试覆盖率达到了💯%。值得幸运的是,对于
React
应用来说,单元测试的成本正在逐步降低。优秀的 TypeScript
首先,在
TypeScript
出现之后,我们不需要去写大部分的单元测试。举个简单的例子,这是
TypeScript
的实现:而下面的这段代码,是单元测试的版本:
所以,
TypeScript
的类型系统的出现,已经不再需要这部分的单元测试了。ESLint 和 Prettier
Eslint
会分析代码,并根据一组规则对其进行检查。这听起来也很像测试。而Prettier
可以根据一组规则来约束代码风格。并且,在编写代码的时候,配合编辑器就可以得到即时的反馈了。像用户一样编写测试
上面所提到的技术,更多是从语言,代码质量,代码风格的角度来提升软件的质量,但却没有像一个用户一样来使用我们的软件。毕竟,软件怎么使用,只有开发者清楚。
除了编写文档、注释、编写 Demo。单元测试也更像是软件的一种说明书,为软件的使用提供了保障。
和 React 文档 中所描述的一样,本文也只是讨论:渲染组件树,在一个简化的测试环境中渲染组件树并对它们的输出做断言检查。
技术栈
项目配置
因为之前使用的是
react-app-rewired
作为 Cli 工具,它会对Jest
的版本有所限制。所以,下面安装依赖时,有些库会锁住版本。为了使用安装的这些依赖,接下来需要修改下
package.json
,增加测试,以及提交之前的校验。最后,还需要给
Jest
增加一个配置文件:jest.config.js
编写测试用例
这里,我需要给之前添加的
EmptyLine
,增加测试用例。empty-line/index.tsx
empty-line/EmptyLine.tsx
empty-line/__test__/index.test.tsx
下面,就是两个
EmptyLine
常见的使用场景,已经在我们的单元测试中都覆盖到了。需要注意的是,这里的
EmptyLine.tsx
组件中并没有引入样式,而是在同级的index.tsx
中引入了样式。因为,这里样式在测试的时候是不支持引入的,会出问题。运行
npm run test
就可以看到结果:当我们提交代码,
commit
的时候,也会在根目录生成一个测试报告:结束语
到这里,我们给组件库增加了测试的功能。使我们的组件库也变得更加有保障,高大上了起来。最后,在第三章中,我们会聊聊如何打包,并上传至
NPM
的事情,敬请期待吧。The text was updated successfully, but these errors were encountered: