toBeVisible is not seeing svelte-kit classes

[Ivan Afanasyeu]

• @testing-library/dom version: "@testing-library/svelte": "^4.0.5",
• Testing Framework and version: "@testing-library/svelte": "^4.0.5",
• DOM Environment: "@testing-library/svelte": "^4.0.5",

Relevant code or config:

//header.test.ts
import { render } from '@testing-library/svelte';
import { describe, it, expect, vi } from 'vitest';

import Header from './Header.svelte';

describe('Header mobile', () => {
	vi.stubGlobal('innerWidth', 600);
	window.innerWidth = 600;

	it('renders header properly', () => {
		const { getByTestId, getByText } = render(Header);
		expect(getByTestId('header')).toBeInTheDocument();
		expect(getByText('small')).toBeVisible();
	});
});

//header.svelte
<header data-testid="header" class="header">
	header
	<p class="small">small</p>
</header>

<style>
	.header {
		background-color: beige;
	}
	.small {
		display: none;
	}
</style>

What you did:

I'm trying to set class to display none, and test should show that item is not visible

What happened:

tests passes successfully

Problem description:

classes styles are not loading

[Ivan Afanasyeu]

vitest-dev/vitest#2981 (comment)

looks like this solves the issue, and classes loading