[Feature]: test.step/it.step (like in playwright) for the integrated tests (with @testing-library/react, for example)

[boardgames]

🚀 Feature Proposal

In complex functional tests (to test react+redux+saga) in complex, it is very convenient to make a sequence of steps in the test, like a playwright

Motivation

I would like to see a more precise test structure in the reports.

Example

At the moment the test looks like this:

describe('Test select nodes on scheme canvas', () => {
   it('Select RED node', async () => {
      const { screen, store } = await initWebview();
      
      // Add RED node
      await screen.scheme.toolbar.buttonAddRedNode.click();

      await expect(store.getNode('node-1)).toBeExisted();
      await expect(screen.scheme.canvas.getNode('node-1')).toBeVisible();

      // Select RED node
      await screen.scheme.scheme.getNode('node-1').click();

      await expect(store.getSelectedNode()).toEqual('node-1');
      await expect(screen.scheme.canvas.getNode('node-1')).toBeSelected();
   });
});

Wanna:

describe('Test select nodes on scheme canvas', () => {
   it('Select RED node', async () => {
      const { screen, store } = await intitWebview();
      
      await it.step('Add RED node', async () => {
           await screen.scheme.toolbar.buttonAddRedNode.click();

           await expect(store.getNode('node-1')).toBeExisted();
           await expect(screen.scheme.canvas.getNode('node-1')).toBeVisible();
           
      });

      await it.step('Select RED node', async () => {
           await screen.scheme.scheme.getNode('node-1').click();

           await expect(store.getSelectedNode()).toEqual('node-1');
           await expect(screen.scheme.canvas.getNode('node-1')).toBeSelected();
      });
   });
});

Pitch

This pattern would seemingly work in both async and sync test blocks and would allow us to have more flexibility with writing out tests while still getting clear indication on what step a test failed on.