Share jest test for SelectV2

[DaveOps]

Can you share a example jest test for a SelectV2 component?

For some reason I am not able to make it work due to rendering of selectv2-menu options after a click event.

[educampver]

Hi @DaveOps, would you please share your failing tests and the errors why they fail? It would greatly help us figure out the issue.

Best, Edu.

[DaveOps]

Sharing the code:

test("opens the dropdown with options showing", async () => {
    render(
      <AppRoot>
        <GenericDropdown
          id="gd"
          icon={<span>Icon</span>}
          options={options}
          value="30s"
          onChange={mockOnChange}
          ariaLabel="Select an option"
        />
      </AppRoot>,
      { baseElement: document.body } 
    );

    const user = userEvent.setup();
    const combobox = screen.getByRole('combobox');
    expect(combobox).toBeInTheDocument();

    await user.click(combobox);

    const listbox = await screen.findByRole('listbox');
    const option1 = await within(listbox).findByRole('option', { name: '5 seconds' });
    const option2 = await within(listbox).findByRole('option', { name: '15 seconds' });
    const option3 = await within(listbox).findByRole('option', { name: '30 seconds' });
    const option4 = await within(listbox).findByRole('option', { name: '1 minute' });
    const option5 = await within(listbox).findByRole('option', { name: '5 minutes' });

    expect(option1).toBeInTheDocument();
    expect(option2).toBeInTheDocument();
    expect(option3).toBeInTheDocument();
    expect(option4).toBeInTheDocument();
    expect(option5).toBeInTheDocument();
  });

After a click event on the input with role combobox, the options are not rendered and it can't find option1.

[educampver]

I see, using the combobox could be the issue, try using getByTestId('selectv2-trigger') instead.

Cheers, Edu.

[DaveOps]

I made the code change that you suggested which resulted into this error:

FAIL  tests/components/GenericDropdown.test.tsx (7.413 s)
  GenericDropdown Component
    ✓ renders with the default value (47 ms)
    ✕ opens the dropdown with options showing (1088 ms)
    ○ skipped changes the value when a different option is selected

  ● GenericDropdown Component › opens the dropdown with options showing

    Unable to find role="option" and name "5 seconds"

    Ignored nodes: comments, script, style
    <div
      aria-multiselectable="false"
      class="Select_selectMenuListWrapperCSS__1x49mee9 strato-selectV2-menulist"
      id="react-select-3-listbox"
      role="listbox"
    >
      <div
        class="Select_selectVirtualizationWrapperCSS__1x49mee8"
        style="height: 160px; display: grid; grid-template-rows: 32px 32px 32px 32px 32px;"
      />
    </div>

      65 |     const listbox = await screen.findByRole('listbox');
      66 |
    > 67 |     const option1 = await within(listbox).findByRole('option', { name: '5 seconds' });
         |                                           ^
      68 |     const option2 = await within(listbox).findByRole('option', { name: '15 seconds' });
      69 |     const option3 = await within(listbox).findByRole('option', { name: '30 seconds' });
      70 |     const option4 = await within(listbox).findByRole('option', { name: '1 minute' });

      at waitForWrapper (../node_modules/@testing-library/dom/dist/wait-for.js:163:27)
      at ../node_modules/@testing-library/dom/dist/query-helpers.js:86:33
      at Object.<anonymous> (components/GenericDropdown.test.tsx:67:43)

[nina · Accepted solution]

Hi, @DaveOps! A virtualization mock is needed for testing as the SelectV2 automatically virtualizes the options. Did you add setupVirtualizationMock() from the @dynatrace/strato-components-preview/testing package to the test?
Your tests could look something like this:

describe('selectv2 testing', () => { 
  beforeEach(() => { 
    setupVirtualizationMock(); 
  }); 
  afterEach(()=> { 
    clearVirtualizationMock(); 
  }); 
  test(...); 
});

Alternatively, you should also be able to call the setup() function to set up all the mocks necessary for testing the Strato components.

[DaveOps]

Thanks Nina, now it works.