DEV Community

Rafael Lourenço
Rafael Lourenço

Posted on

First component and Vitest

Yesterday, I completed my first component.
menu component

When I tried to set up a small automated frontend test, I initially chose Jest. However, I received advice about potential memory leak issues with Jest. While I wasn't sure what a memory leak was, I decided to follow the advice to avoid problems.

This led me to consider Vitest as an alternative for testing. Unfortunately chatGPT which hasn't received an update, doesn't recognize Vitest since it was introduced after January 2022. Despite this, the good thing about Vitest is that its syntax is almost identical to Jest. After spending some time understanding it, I followed Jest tutorials to learn how to conduct tests in Vitest.

Now, I've successfully completed my first test. It's a small test, but it works!

it('should open the dropdown menu with "Inicio" option after being clicked', async () => {
  const { getByText, getByAltText } = render(<NavbarButton />);
  const svgElement = getByAltText('menu SVG');
  fireEvent.click(svgElement)
  const buttonInicio = getByText('Inicio') 

});
Enter fullscreen mode Exit fullscreen mode

Top comments (0)