#Trying to write a play test for element not in DOM

2 messages · Page 1 of 1 (latest)

gusty peak
#

Hi. I'm new to storybook and I'm having an issue writing a test for an element not in DOM

await step('Menu opens and closes', async () => {
  // Getting the trigger
  const trigger = canvas.getByRole('button', {
    name: 'application-switcher-menu-toggle',
  });
  
  // Getting the menu label
  const label = canvas.getByText('Switch to');

  // I expect it not to be in the document because the trigger has not been clicked
  expect(label).not.toBeInTheDocument();

  // Click trigger
  await userEvent.click(trigger);

  // Expect label to be in document
  expect(label).not.toBeInTheDocument();

  // Click trigger again
  await userEvent.click(trigger);

  // Expect label not to be in document
  expect(label).not.toBeInTheDocument();
});

The test by itself is okay but canvas.getByText('Switch to') results in error saying 'Unable to find an element with the text: Switch to.'

kindred elm
#

Is the element you're looking for in the menu?