By Suite

This is perhaps the most common way to group test results, and it makes the most sense for projects using Jest.

The suite hierarchy consists of up to four levels: parent suite, suite, sub-suite and test case.

Glossary

Parent Suite

The highest level of the hierarchy used to group test results by package (e.g., client, server), test directory (e.g., e2e, unit, integration), or any other relevant criteria. It is not configured by default, but you can easily add it to your reports.

Suite

Serves as the primary grouping level, typically based on test file paths. However, you can choose alternative criteria such as feature or component directories (LoginScreen, ProfileScreen, core, utils), or top-level describe block names, if preferred.

Subsuite

Helpful when dealing with a large number of test cases within a single suite. By default, test cases are grouped per top-level describe block. However, if there are numerous nested describe blocks (or, vice versa — lots of files and directories), you can look for alternative configurations.

Test Case

Represents the actual test. By default, it displays the test name, including the inner describe block names. You have the flexibility to choose a test name format that best suits your needs – see a few examples below in this article.

Below we'll explore a few examples of how to configure the grouping by suite.

Default preset

By default, jest-allure2-reporter provides 3 levels of grouping: suite, sub-suite, and test case:

1. The suite level is based on the test file path.
2. The sub-suite level is based on the top-level describe block.
3. The test case level is based on the test name (including the inner describe block names).

Preview

Structure

├─ client/auth/LoginScreen.test.js
│  └─ Login screen
│     ├─ when loaded should display login form
│     └─ when loaded and typed should validate e-mail
│     └─ when loaded and typed should validate password
├─ client/auth/ForgotPasswordScreen.test.js
│  └─ Forgot password screen
│     ├─ when loaded should display forgot password form
│     └─ when loaded and typed should validate e-mail
├─ server/controllers/login.test.js
|  └─ Login controller
|     ├─ should return 401 if user is not found
|     └─ should return 401 if password is incorrect
└─ server/controllers/forgotPassword.test.js
   └─ Forgot password controller
      ├─ should return 401 if user is not found
      └─ should return 401 if password is incorrect

Config

jest.config.js

/** @type {import('@jest/types').Config.InitialOptions} */
module.exports = {
  testEnvironment: 'jest-allure2-reporter/environment-node',
  reporters: [
    'default',
    'jest-allure2-reporter',
    // You don't need to configure anything special
    // to get this structure.
  ],
};

File-oriented example

This example might be useful for projects with many test files and relatively few test cases per file.

Preview

Structure

├─ client
│  └─ auth
│     ├─ LoginScreen.test.js
│     │  ├─ Login screen when loaded should display login form
│     │  ├─ Login screen when loaded and typed should validate e-mail
│     │  └─ Login screen when loaded and typed should validate password
│     └─ ForgotPasswordScreen.test.js
│        ├─ Forgot password screen when loaded should display forgot password form
│        └─ Forgot password screen when loaded and typed should validate e-mail
└─ server
   └─ controllers
      ├─ login.test.js
      │  ├─ Login controller should return 401 if user is not found
      │  └─ Login controller should return 401 if password is incorrect
      └─ ForgotPasswordScreen.test.js
         ├─ Forgot password controller should return 401 if user is not found
         └─ Forgot password controller should return 401 if password is incorrect

Config

jest.config.js

/** @type {import('@jest/types').Config.InitialOptions} */
module.exports = {
  testEnvironment: 'jest-allure2-reporter/environment-node',
  reporters: [
    'default',
    ['jest-allure2-reporter',
      /** @type {import('jest-allure2-reporter').ReporterOptions}*/
      {
        testCase: {
          name: ({ testCase }) => [
            ...testCase.ancestorTitles,
            testCase.title
          ].join(' » '),
          labels: {
            parentSuite: ({ filePath }) => filePath[0],
            suite: ({ filePath }) => filePath[1],
            subSuite: ({ filePath }) => filePath.slice(2).join('/'),
          },
        },
      },
    ],
  ],
};

Test-oriented example

This example should fit projects with a smaller number of test files and numerous test cases per file.

Preview

Structure

├─ client/auth/LoginScreen.test.js
│  ├─ Login screen
│  │  ├─ when loaded
│  │  │  └─ should display login form
│  │  └─ when loaded and typed
│  │     ├─ should validate e-mail
│  │     └─ should validate password
│  └─ Forgot password screen
│     ├─ when loaded
│     │  └─ should display forgot password form
│     └─ when loaded and typed
│        └─ should validate e-mail
└─ server/controllers/login.test.js
   ├─ Login controller
   │  ├─ should return 401 if user is not found
   │  └─ should return 401 if password is incorrect
   └─ Forgot password controller
      ├─ should return 401 if user is not found
      └─ should return 401 if password is incorrect

Config

jest.config.js

/** @type {import('@jest/types').Config.InitialOptions} */
module.exports = {
  testEnvironment: 'jest-allure2-reporter/environment-node',
  reporters: [
    'default',
    ['jest-allure2-reporter', /** @type {import('jest-allure2-reporter').ReporterOptions}*/ {
      labels: {
        parentSuite: ({ filePath }) => filePath.join('/'),
        suite: ({ testCase }) => testCase.ancestorTitles[0],
        subSuite: ({ testCase }) => testCase.ancestorTitles.slice(1).join(' ') || undefined,
        test: ({ testCase }) => testCase.title,
      },
    }],
  ],
};