AEMCaaS - Code Check | Community
Skip to main content
S
SupportMember
Level 6
December 22, 2022
Solved

AEMCaaS - Code Check

  • December 22, 2022
  • 2 replies
  • 1290 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Anmol_Bhardwaj

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.

2 replies

nitesh_kumar-1
Adobe Employee
nitesh_kumar-1Adobe Employee
Adobe Employee
December 23, 2022

Hi @supportmember ,

 

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
    Community Advisor
    Anmol_BhardwajCommunity Advisor
    Community Advisor
    December 27, 2022

    Hi @supportmember ,

     

    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

     

      S
      SupportMemberAuthor
      Level 6
      December 30, 2022

      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
        Community Advisor
        Anmol_BhardwajCommunity AdvisorAccepted solution
        Community Advisor
        January 4, 2023

        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.

          Terms & ConditionsAccessibility statement

          Loading footer...