Sonarqube：前端代码+单元测试集成
前言最近有一个需求做前端代码和单元测试集成，集成不是我做的，公司其他部门同事做的，我只负责写前端的配置文件，记录一下我在集成过程中遇到的问题及解决方法。
jest.config.js 中文件配置
下面是做集成时，需要改的配置。
coverageDirectory: './coverage', // 执行单元生成文件所在的文件夹
collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}'], // 需要写单元测试文件，一般是src下面所有代码
coveragePathIngorePatterns: ['/node_modules/','/__tests__/'], // 不需要写单元测试的文件
testMatch: ['<rootDir>/src/**/__tests__/*.test.js'] // 配置单元测试文件
如何生成单元测试覆盖率文件
jest自动生成的clover.xml文件是不能识别的，需要安装jest-sonar插件，生成sonar可以识别的已经完成的单元测试组件的文件，需要将下面配置放在jest.config.js。
reporters: [
'default',
[
'jest-sonar',
{
outputDirectory: './coverage', // 在这个文件夹下面
outputName: 'report-name-test.xml', // 最后生成文件名字
reportedFilePath: 'relative' // 相对路径
}
]
]
执行jest --coverage 可以生成两个文件一个是report-name-test.xml（这个是写完了单元测试组件生成的文件），一个是lcov.info （项目中需要写单元测试组件，生成的文件）
前端单元测试集成配置
sonar-scanner
-Dsonar.projectKey=${appname}
-Dsonar.language=js // 语言
-Dsonar.sources=. // 分析文件目录默认值是.
-Dsonar.exclusions=**/__tests__/* // 不包括单元测试文件
-Dsonar.tests.inclusions=**/__tests__/* // 单元测试文件
-Dsonar.sourceEncoding=UTF-8
-Dsonar.branch.name=$BRANCH_NAME // 扫描分支名
-Dsonar.testExecutionReportPaths=report-name-test.xml // jest-soanr 完成了的单元测试组件
-Dsonar.javascript.lcov.reportPaths=lcov.info // 需要完成的单元测试组件
-Dsonar.login=000000" // 集成的id，需要修改
lcov.info改成相对路径
生成的lcov.info文件的路径是绝对路径，需要改成相对路径，这个是在Jenkinsfile文件中写的。
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"，此时需要注意不能使用运行监视模式,否则在构建中会卡在此步。
总结
其实项目中还遇到了很多问题，但是那些问题不涉及前端，需要和其他部门沟通，没有一一列举出来，我自己的感悟是即使有别人写好文档，有时候改问还是要问的，哈哈哈，文档嘛，终究不全面。有问题欢迎留言。
页:
[1]
