preface

Recently, there was a requirement to integrate front-end code and unit test. The integration was not done by me, but by colleagues in other departments of the company. I was only responsible for writing front-end configuration files and recording the problems I encountered in the integration process and the solutions.

File configuration in jest.config.js

Jestjs. IO/zh-hans /doc… Here are the configurations that need to be changed for integration.

CoverageDirectory: './coverage', // execute unit build file folder collectCoverageFrom: ['/SRC / * * *. {js, JSX, ts, the TSX} '], / / need to write unit test file, typically SRC coveragePathIngorePatterns all code below: ['/node_modules/', '/ __tests__ /'], / / no need to write unit tests file testMatch: [' < rootDir > / SRC / / __tests__ / *. * * test. The js'] / / configuration unit test filesCopy the code

How do I generate a unit test coverage file

Jest automatically generated clover. XML file is unrecognized, need to install jest-sonar plugin, generate sonar can recognize the completed unit test component file, need to put the following configuration in jest. Config.js.

[' sonar', {outputDirectory: './coverage', // // reportedFilePath: 'relative' // relative path}]]Copy the code

Jest –coverage generates two files: report-name-test. XML and lcov.info

Front-end unit test integration configuration

Sonar -scanner -Dsonar. ProjectKey =${appName} -Dsonar. Language =js // language -Dsonar. Sources =. - Exclusions =**/__tests__/* / exclusions=**/__tests__/* // Unit test files - sonar. SourceEncoding =UTF-8 -Dsonar. Branch. Name =$BRANCH_NAME // Scan the branch name - Dsonar. TestExecutionReportPaths = report - name - test. XML / / jest - soanr completed the unit test components - Dsonar. Javascript. The lcov. ReportPaths = the lcov. Info / / need to complete the unit test components - Dsonar. Login = 000000 "id / / integration, need to be modifiedCopy the code

Detailed configuration, please click the website docs.sonarqube.org/latest/anal…

Lcov.info changes to a relative path

The path to the generated lcov.info file is absolute and needs to be changed to a relative path, which is written in Jenkinsfile.

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

/test/web/ in the lcov.info file./, if the file path is /test/web/a.js, after the command is executed, the file path will be./a.js. Between the second % and the third % is the substitution you want.

Include unit tests in your build

NPM run jest dockerfile NPM run build dockerfile NPM run jest dockerfile NPM run build “Jest –coverage”, at this point you need to be careful not to use run monitor mode, otherwise you will get stuck in this step during the build. If you do not know the configuration of dockerFile, go to juejin.cn/post/693198…

conclusion

In fact, there were a lot of problems in the project, but those problems did not involve the front end and needed to communicate with other departments, so I did not list them one by one. My own perception is that even if someone has written a good document, sometimes I still have to ask questions. Leave a comment if you have any questions.