手摸手,打造属于自己的 React 组件库02 — 测试篇
2020/1/31 5:19:31
本文主要是介绍手摸手,打造属于自己的 React 组件库02 — 测试篇,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
第二部分 - 测试篇:给组件加上单元测试
引言
在第一部分,我们基于 create-react-app
构建了项目的基础结构。对于一个组件库来说,不仅要有简单,实用的组件,每一个组件的质量也是至关重要。而单元测试,正是提升软件质量的一种有效的手段。在本文中,不仅会在之前的项目中完成单元测试的配置,还会带着大家一起走进单元测试的世界~
教程部分
本篇文章,是这个系列的第二篇 - 单元测试
- 第一部分:从 0 到 1,还原一个后台项目
- 第二部分:单元测试
- 第三部分:项目打包,并发布至 NPM
2020到了,我还需要单元测试吗?
首先,告诉大家一个小秘密,就是我不太喜欢单元测试。它很费时,重构项目会变得很吃力。而且,单元测试没有一个明确的边界,有时总会觉得自己的单元测试写的不够。而且,代码也并不会因为单元测试就不会出现 BUG
,即使你的测试覆盖率达到了💯%。
值得幸运的是,对于 React
应用来说,单元测试的成本正在逐步降低。
优秀的 TypeScript
首先,在 TypeScript
出现之后,我们不需要去写大部分的单元测试。
举个简单的例子,这是 TypeScript
的实现:
type Props = { name: string; };
而下面的这段代码,是单元测试的版本:
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(); });
所以,TypeScript
的类型系统的出现,已经不再需要这部分的单元测试了。
ESLint 和 Prettier
Eslint
会分析代码,并根据一组规则对其进行检查。这听起来也很像测试。而 Prettier
可以根据一组规则来约束代码风格。并且,在编写代码的时候,配合编辑器就可以得到即时的反馈了。
像用户一样编写测试
上面所提到的技术,更多是从语言,代码质量,代码风格的角度来提升软件的质量,但却没有像一个用户一样来使用我们的软件。毕竟,软件怎么使用,只有开发者清楚。
除了编写文档、注释、编写 Demo。单元测试也更像是软件的一种说明书,为软件的使用提供了保障。
和 React 文档 中所描述的一样,本文也只是讨论:渲染组件树,在一个简化的测试环境中渲染组件树并对它们的输出做断言检查。
技术栈
- Jest:JavaScript 测试框架。
- @testing-library/react:将 React 组件转化成 Dom 节点来测试,而不是渲染的 React 组件的实例,可以当做是 Enzyme 的替代。
- ts-jest:是一个 TypeScript 预处理器,它支持 Jest 的源映射,允许你使用 Jest 测试用 TypeScript 编写的项目。
- jest-html-reporter:一个生成测试报告的库。
项目配置
因为之前使用的是 react-app-rewired
作为 Cli 工具,它会对 Jest
的版本有所限制。所以,下面安装依赖时,有些库会锁住版本。
npm i -D ts-jest@24.1.0 @types/jest jest@24.9.0 jest-html-reporter @testing-library/react @babel/preset-env @babel/preset-react
为了使用安装的这些依赖,接下来需要修改下 package.json
,增加测试,以及提交之前的校验。
... "scripts": { + "test": "jest --no-cache", } ... "lint-staged": { "*.{js,ts,tsx}": [ "eslint --fix src/**/*.{ts,tsx}", + "jest --bail --coverage --findRelatedTests", "git add ." ], "*.{md,css,html,less}": [ "prettier --write", "git add ." ] }
最后,还需要给 Jest
增加一个配置文件:jest.config.js
module.exports = { preset: 'ts-jest', transform: { '^.+\\.tsx?$': 'ts-jest', }, globals: { 'ts-jest': { babelConfig: { presets: ['@babel/preset-env', '@babel/preset-react'], }, }, }, testEnvironment: 'jsdom', testMatch: [ '<rootDir>/src/**/__tests__/**/*.{ts,tsx,js,jsx,mjs}', '<rootDir>/src/**/?(*.)(spec|test).{ts,tsx,js,jsx,mjs}', ], reporters: [ 'default', [ './node_modules/jest-html-reporter', { pageTitle: '测试报告', }, ], ], moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], collectCoverage: true, collectCoverageFrom: ['app/react/**/*.{ts,tsx}', '!app/react/__tests__/api/api-test-helpers.ts'], };
编写测试用例
这里,我需要给之前添加的 EmptyLine
,增加测试用例。
empty-line/index.tsx
import './style/index.less'; import EmptyLine from './EmptyLine'; export default EmptyLine;
empty-line/EmptyLine.tsx
import React from 'react'; export interface IEmptyLineProps { height?: number; } const EmptyLine = ({ height = 20 }: IEmptyLineProps) => { return <div className="d-empty-line" style={{ height }} />; }; export default EmptyLine;
empty-line/__test__/index.test.tsx
import React from 'react'; import { create, act } from 'react-test-renderer'; import EmptyLine from '../EmptyLine'; test('默认高度渲染正常', () => { const emptyLine = create(<EmptyLine />).toJSON(); expect(emptyLine?.props.style).toEqual( expect.objectContaining({ height: 20, }), ); }); test('自定义高度渲染正常', () => { let emptyLine: any; act(() => { emptyLine = create(<EmptyLine height={30} />); }); expect(emptyLine.toJSON()?.props.style).toEqual( expect.objectContaining({ height: 30, }), ); });
下面,就是两个 EmptyLine
常见的使用场景,已经在我们的单元测试中都覆盖到了。
需要注意的是,这里的 EmptyLine.tsx
组件中并没有引入样式,而是在同级的 index.tsx
中引入了样式。因为,这里样式在测试的时候是不支持引入的,会出问题。
运行 npm run test
就可以看到结果:
当我们提交代码,commit
的时候,也会在根目录生成一个测试报告:
结束语
到这里,我们给组件库增加了测试的功能。使我们的组件库也变得更加有保障,高大上了起来。最后,在第三章中,我们会聊聊如何打包,并上传至 NPM
的事情,敬请期待吧。
这篇关于手摸手,打造属于自己的 React 组件库02 — 测试篇的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30毕设私活神器
- 2024-05-30html
- 2024-05-09一定要避坑:关于微信H5分享,温馨提示你不要再踩坑了!!!
- 2024-05-09本地项目放到公网访问!炒鸡煎蛋!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)