Create clearer tests by nesting describe()

Testing Frameworks like Vitest, Jest and Jasmine provide a describe() function. It is useful to group your tests into logical groups. The function can be nested to create a hierarchy of tests and make the tests more readable.

In Angular for example, you will have the following spec file when creating a new component:

describe("AccordionComponent", () => {
  it("should create", () => {
    // ...
  });
});

Instead of adding a lot of it() calls with long descriptions you can create multiple describe() blocks.

describe("AccordionComponent", () => {
  describe("initial state is expanded", () => {
    // Mock data, test utils, etc. for this describe() block
    const initiallyExpanded = true;

    it("should render the accordion title", () => {
      // ...
    });

    it("should render the accordion content", () => {
      // ...
    });

    it("should mark the accordion as expanded", () => {
      // ...
    });

    it("should collapse the accordion when clicking on the title", () => {
      // ...
    });
  });

  describe("initial state is collapsed", () => {
    it("should render the accordion title", () => {
      // ...
    });

    it("should not render the accordion content", () => {
      // ...
    });

    it("should mark the accordion as collapsed", () => {
      // ...
    });

    it("should expand the accordion when clicking on the title", () => {
      // ...
    });
  });
});

Jasmine shows all describe() blocks in the output and nests them in a tree structure.