toBeVisible is not seeing svelte-kit classes

[ivanafanasyeu]

• @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

[ivanafanasyeu]

https://github.com/vitest-dev/vitest/issues/2981#issuecomment-1461226661

looks like this solves the issue, and classes loading