jest+testing-library/react 单元测试 react+antd 的实践(一)
前言
之前一次想学写单测，但是一直没有动力，因为感觉ui测试写起来比较复杂而且麻烦，再加上实际开发项周期短，没有时间给写单测，但是最近公司比较注重质量，对测试bug数提出了限制，而且还有惩罚措施，为了避免被惩罚，再因为没有写单测，在给的自测时间里，后端同学可以通过梳理代码，补单测来进行测试，而我只能不断的**点点点…**来测试，很low且没效率，心里也没底（虽然最后测试也没测出bug），总感觉机器比人可靠，因此我后面就开始学习单测，来补全这个项目的测试，在结合gitlab ci ，sonarqube来进行测试报告。
我用的框架是react, 官方推荐jest+testing-library/react ，所以我选择了这两个来写单测。因为用的是antd的框架，平时的业务代码也类似，网上也没太多实际例子，就在这里记录下来，一些常用场景怎么写单测, 以及如何配置。
install
install jest
- 首先安装jest (如果是用react-create 生成的会自带jest 可以跳过这里) `` yarn add --dev jest
- 安装 babel
yarn add --dev babel-jest @babel/core @babel/preset-env新建babel.config.js文件
module.exports = {presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};
- 支持ts
yarn add --dev @babel/preset-typescript
修改babel.config.js 加入@babel/preset-typescript
module.exports = {presets: [['@babel/preset-env', {targets: {node: 'current'}}],'@babel/preset-typescript',],
};
安装ts-jest, jest 的 TypeScript 预处理器 yarn add --dev ts-jest
- jest 配置文件
jest --init初始化配置 生成jest.config.ts文件
export default {// 不建议自动mock 可以手动mock 后面会有讲automock: false,// Automatically clear mock calls, instances, contexts and results before every testclearMocks: true,// 测试覆盖率collectCoverage: true,// 测试覆盖率收集来源collectCoverageFrom: ['src/**/*.ts', 'src/**/*.tsx', '!**/node_modules/**'],// 测试覆盖率生成的目录文件coverageDirectory: 'coverage',// Indicates which provider should be used to instrument code for coveragecoverageProvider: 'babel',// babel不支持的一些文件 例如图片 css/scss 模块的映射moduleNameMapper: {'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|ico)$':'/__mocks__/fileMock.js' , // 新建__mocks__/fileMock.js'\\.(css|less|scss|sass)$': 'identity-obj-proxy', //className查找都会原样返回 要安装identity-obj-proxy},// Use this configuration option to add custom reporters to Jestreporters: ['default',['jest-sonar',{outputDirectory: './coverage', // 在这个文件夹下面outputName: 'test-report.xml', // 最后生成文件名字reportedFilePath: 'relative', // 相对路径},],],// A list of paths to modules that run some code to configure or set up the testing framework before each testsetupFilesAfterEnv: ['/setupTest.ts' ],// The test environment that will be used for testingtestEnvironment: 'jsdom', // js测试环境 要安装 jest-environment-jsdom// A map from regular expressions to paths to transformerstransform: {'^.+\\.(js|jsx)$': ['babel-jest'],'^.+\\.(ts|tsx)$': ['ts-jest'],},// 转换器要忽略的路径transformIgnorePatterns: ['[/\\\\]node_modules/(?!(antd)/)[/\\\\].+\\.(js|jsx|ts|tsx)$'],
};
- 安装 jest-environment-jsdom
yarn add --dev jest-environment-jsdom提供js dom测试环境 - 为了识别 scss/css文件 要安装identity-obj-proxy
yarn add --dev identity-obj-proxyclassName查找都会原样返回 - 为了识别图片等文档，需要把他们映射到指定文件 fileMock.js
export default 'test-file-stub';在packgage.json script里面加test:jest --coverage 运行yarn test 会自动测试，测试完成生成测试覆盖率，以及测试报告在coverage/icov-report/index.html文件里面
install testing-library/react
yarn add --dev @testing-library/react @testing-library/jest-dom @testing-library/react-hooks @testing-library/user-event
- @testing-library/react : 以用户为中心的方式测试 UI 组件。
- @testing-library/jest-dom 好用的自定义 jest 匹配器来测试 DOM 的状态
- @testing-library/react-hooks 测试react hook
- @testing-library/user-event 测试交互事件
根目录 新建setupTest.ts文件 默认启动导入 @testing-library/jest-dom，避免在每个文件单独写
import '@testing-library/jest-dom';
install eslint-plugin-testing-library
yarn add --dev eslint-plugin-testing-library
<本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！