AEMCaaS - Code Check

[AEMWizard]

How do we enable JavaScript unit tests for ui.frontend? Can we use JEST? what kind of configurations we need to do to export the coverage.json code?

[nitesh_kumar]

Hi @AEMWizard ,

You can refer to these links:-

https://blog.3sharecorp.com/unit-testing-js-and-ts-in-aem-with-jest

https://www.youtube.com/watch?v=mz_BBEZ09_A&ab_channel=3%7CSHARECorp-AEMImplementationExperts

AFAIK, This doesn't run on the Quality check step of the pipeline, that's for backend code. If that's what you meant.

However, you can still find the execution result in logs.

Regards,

Nitesh

[Anmol_Bhardwaj]

Hi @AEMWizard ,

To enable JavaScript unit tests for ui.frontend in AEM, you can use Jest. 

1. 

npm install --save-dev jest

2. Create a configuration file for Jest by creating a jest.config.js file in the root of your project. In this file, you can specify various options for running your tests, such as the test environment, the test regex, and the test paths.

module.exports = { testEnvironment: 'jsdom', testRegex: '/__tests__/.*\\.test\\.js$', testPathIgnorePatterns: ['/node_modules/', '/lib/'], modulePathIgnorePatterns: ['/node_modules/', '/lib/'], coveragePathIgnorePatterns: ['/node_modules/', '/lib/'] };

3. To set up your test files, you can create a __tests__ folder in your project and add your test files to this folder. Each test file should have a .test.js extension and should contain your test code.

4. To generate a coverage report, you can use the --coverage flag when running the jest command. This will create a coverage/ folder in your project containing a coverage-summary.json file and a lcov-report/ folder with an HTML version of the coverage report.

jest --coverage

[AEMWizard]

Thanks, 

This makes sense for a standard pipeline,  but like how can I upload the coverage to Adobe's code AEMaaCS code check?

[Anmol_Bhardwaj · Accepted solution]

For that , you need to modify your frontend build process to instrument your code for coverage.

This can be done by using a preprocessor such as Babel or by modifying your build tool's configuration to include the Istanbul instrumentation plugin.

• Run your frontend tests as you normally would, using a command such as npm run test.
• This will generate a coverage report in the coverage directory.
• Finally, you can view the coverage report by opening the index.html file in the coverage directory using a web browser.

This will show you a detailed breakdown of the code coverage for your UI Frontend, including which lines of code were executed and which were not.