How to Integrate Allure Report for Jest Tests

I will share how to integrate Allure Report for Jest tests in this tutorial. 

First Time Installations

To integrate Allure reports with Jest, we should first install the below libraries. 

• npm i jest-allure
• npm i jasmine-allure-reporter
• npm i allure-commandline
• npm i jest-jasmine2

Required Setup and Configurations in the Project

In the project repository, we need to add the bold blue lines to jest.config.js file. The config file may change based on your project and you need to add only the blue lines if they are not in your config.

module.exports = {
rootDir: ‘../../../’,
moduleFileExtensions: [‘js’, ‘json’, ‘ts’],
transform: {
‘^.+\\.(t|j)s$’: ‘ts-jest’,
},
testRegex: ‘.ct.spec.ts$’,
moduleDirectories: [‘node_modules’],
preset: ‘ts-jest’,
setupFiles: [‘./test/config/ct/setEnvVars.ts’],
reporters: [‘default’, ‘jest-allure’],
testRunner: ‘jest-jasmine2’,
setupFilesAfterEnv: [
‘./test/config/ct/setupTestFramework.ts’,
‘./test/ct/specs/base.spec.ts’,
‘jest-allure/dist/setup’,
],
};

Required Code Changes

In your test class, you should declare the reporter.

declare const reporter: any;

Also, we should add the below beforeEach block to generate the report with EPIC, FEATURE, STORY, and DESCRIPTION.

beforeEach(() => {
reporter
.epic('Component Tests.')
.feature('Shopping Cart Feature.')
.story('Cart Crud Story.')
.description(expect.getState().currentTestName);
});

and if you want to add extra steps, we should implement them with startStep() and endStep() methods, as shown below:

it('Update a cart', async () => {
    //Step-1: Test Data Section. Prepare request object.
    await reporter.startStep('Update cart data creation step.'); //If you want, you can add step details to Allure reports.
    const createCartResponse = await skeletonService.createACart(appServer);
    const createCartResponseBody: Cart = createCartResponse.body;
    const payload = JSON.stringify(updateCartJson); //Builder pattern also can be used here.
 
    const requestObject: RequestObject = requestObjectBuilder
      .headers(headerUtil.getHeaders())
      .resourcePath('/carts/' + createCartResponseBody.id)
      .payload(payload)
      .build();
    await reporter.endStep();
 
    //Step-2: Hit the service with http client and the prepared request object.
    await reporter.startStep('Update cart hiting the service step.');
    const response = await skeletonService.patchCart(appServer, requestObject);
    await reporter.endStep();
 
    //Step-3: Do the verifications and assertions.
    await reporter.startStep('Update cart verification step.');
    const responseBody: Cart = response.body;
    logger.log('Response Body: ' + JSON.stringify(responseBody));
    expect(response.status).to.be.equal(200);
    expect(responseBody.description).to.be.contains('Updated description.');
    expect(responseBody.product).to.be.equal('Updated product.');
    await reporter.endStep();
  });

How to Generate Reports

First, we must install the allure commandline globally with the below command.

References:

• https://javascript.plainenglish.io/using-allure-and-jest-to-improve-test-reporting-d43a8e01ab0f
• https://stackoverflow.com/questions/65889205/accessing-jasmine-with-testrunner-set-to-jest-circus-results-in-referenceerror/66073466#66073466
• https://openbase.com/js/jest-allure