Cursors position not reset between tests?

[geritol]

In this test:

import React from 'react';
import { describe, expect, test } from 'vitest';
import { render } from 'vitest-browser-react';
import './aa.css';

const TestComponent = (props: {children: any }) => {
    return <div className='aa' role='button' style={{width: 100, height: 50}}>{props.children}</div>
}

describe('Test', () => {
	test('default', async () => {
		const { container } = await render(<TestComponent>default</TestComponent>);
		await expect.element(container).toMatchScreenshot('default');
	});
	test('default hower', async () => {
        const screen = await render(<TestComponent>default</TestComponent>);
		await screen.getByRole('button').click();
		await expect.element(screen.container).toMatchScreenshot('default-expanded');
	});
	test('default again', async () => {
		const { container } = await render(<TestComponent>default</TestComponent>);
		await expect.element(container).toMatchScreenshot('default again');
	});
});

aa.css

.aa {
    background-color: blue;
    &:hover {
        background-color: yellow;
    }
}

The screenshot of default again will have the element with yellow background even if there was no interaction with that element in that test.

When default again is tagged with .only the test creates the expected screenshot with blue bg.

To me it seems it might be because cursor position is leaking between the tests, and since the previous test clicked an element in that position, next test is affected.

[sheremet-va]

I think this is expected. All tests run after another in a single test file.

Vitest tries to avoid doing any extra work between tests. We do reset the keyboard state if userEvent.type was used, but always resetting the cursor might be a be too expensive.