Sonarqube：前端代码+单元测试集成

lsekfe

前言
　　最近有一个需求做前端代码和单元测试集成，集成不是我做的，公司其他部门同事做的，我只负责写前端的配置文件，记录一下我在集成过程中遇到的问题及解决方法。

　　jest.config.js 中文件配置
　　下面是做集成时，需要改的配置。

1. coverageDirectory: './coverage', // 执行单元生成文件所在的文件夹
   
2. collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}'], // 需要写单元测试文件，一般是src下面所有代码
   
3. coveragePathIngorePatterns: ['/node_modules/','/__tests__/'], // 不需要写单元测试的文件
   
4. testMatch: ['<rootDir>/src/**/__tests__/*.test.js'] // 配置单元测试文件

复制代码

如何生成单元测试覆盖率文件
　　jest自动生成的clover.xml文件是不能识别的，需要安装jest-sonar插件，生成sonar可以识别的已经完成的单元测试组件的文件，需要将下面配置放在jest.config.js。

1. reporters: [
   
2.     'default',
   
3.     [
   
4.       'jest-sonar',
   
5.       {
   
6.         outputDirectory: './coverage', // 在这个文件夹下面
   
7.         outputName: 'report-name-test.xml', // 最后生成文件名字
   
8.         reportedFilePath: 'relative' // 相对路径
   
9.       }
   
10.     ]
    
11. ]

复制代码

执行jest --coverage 可以生成两个文件一个是report-name-test.xml（这个是写完了单元测试组件生成的文件），一个是lcov.info （项目中需要写单元测试组件，生成的文件）

　　前端单元测试集成配置

1. sonar-scanner
   
2. -Dsonar.projectKey=${appname}
   
3. -Dsonar.language=js // 语言
   
4. -Dsonar.sources=. // 分析文件目录默认值是.
   
5. -Dsonar.exclusions=**/__tests__/* // 不包括单元测试文件
   
6. -Dsonar.tests.inclusions=**/__tests__/* // 单元测试文件
   
7. -Dsonar.sourceEncoding=UTF-8
   
8. -Dsonar.branch.name=$BRANCH_NAME // 扫描分支名
   
9. -Dsonar.testExecutionReportPaths=report-name-test.xml // jest-soanr 完成了的单元测试组件
   
10. -Dsonar.javascript.lcov.reportPaths=lcov.info // 需要完成的单元测试组件
    
11. -Dsonar.login=000000" // 集成的id，需要修改

复制代码

　lcov.info改成相对路径
　　生成的lcov.info文件的路径是绝对路径，需要改成相对路径，这个是在Jenkinsfile文件中写的。

1. sh "sed -i -e 's%/test/web/%./%g' lcov.info"

复制代码

　lcov.info文件中路径的/test/web/，替换成./,如果文件路径是 /test/web/a.js,执行命令之后就会变成./a.js.（就是把绝对路径换成相对路径）第一个%和第二个%之间是原有的路径，第二个%和第三个%之间是替换成你想要的。

　　在构建中加入单元测试
　　在dockerfile中npm run build之后加入npm run jest,需要在packpage.json中的scripts加入"jest": "jest --coverage"，此时需要注意不能使用运行监视模式,否则在构建中会卡在此步。

　　总结
　　其实项目中还遇到了很多问题，但是那些问题不涉及前端，需要和其他部门沟通，没有一一列举出来，我自己的感悟是即使有别人写好文档，有时候改问还是要问的，哈哈哈，文档嘛，终究不全面。有问题欢迎留言。