topic Re: Share jest test for SelectV2 in Developer Q&A Forum

Share jest test for SelectV2

DaveOps — Wed, 02 Oct 2024 08:56:54 GMT

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.

Re: Share jest test for SelectV2

educampver — Fri, 04 Oct 2024 09:07:45 GMT

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.

Re: Share jest test for SelectV2

DaveOps — Fri, 04 Oct 2024 13:12:22 GMT

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.

Re: Share jest test for SelectV2

educampver — Fri, 04 Oct 2024 13:38:21 GMT

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

Cheers, Edu.

Re: Share jest test for SelectV2

DaveOps — Fri, 04 Oct 2024 14:05:44 GMT

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)

Re: Share jest test for SelectV2

nina — Mon, 07 Oct 2024 08:16:55 GMT

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.

Re: Share jest test for SelectV2

DaveOps — Mon, 07 Oct 2024 15:04:01 GMT

Thanks Nina, now it works.