Say, I have a HelloWorld Svelte component as below:
<code>//
// HelloWorld.svelte
//
<script>
export let name = 'world';
</script>
<h1>Hello {name}!</h1>
<style>
h1 {
background-color: #00b5e2;
padding: 20px;
border-radius: 8px;
margin: 5px 0 0 0;
font-weight: 400;
font-size: 20px;
line-height: 32px;
color: #fff;
}
</style>
</code>
<code>//
// HelloWorld.svelte
//
<script>
export let name = 'world';
</script>
<h1>Hello {name}!</h1>
<style>
h1 {
background-color: #00b5e2;
padding: 20px;
border-radius: 8px;
margin: 5px 0 0 0;
font-weight: 400;
font-size: 20px;
line-height: 32px;
color: #fff;
}
</style>
</code>
//
// HelloWorld.svelte
//
<script>
export let name = 'world';
</script>
<h1>Hello {name}!</h1>
<style>
h1 {
background-color: #00b5e2;
padding: 20px;
border-radius: 8px;
margin: 5px 0 0 0;
font-weight: 400;
font-size: 20px;
line-height: 32px;
color: #fff;
}
</style>
I have configured Vite as the builder and Vitest as the test framework for unit tests.
I am able to write unit tests to test the script and html parts of the component using Vitest and @testing-library
However, I would also like to now write test to verify that that the h1 element is:
- assigned the color #fff
- assigned the background-color #00b5e2
- and so on
Has anyone tried writing unit tests for the CSS part in Svelte? Any guidance would be much appreciated.
I have tried using Quixote but honestly did not quite understand how to integrate it to test Svelte components since Quixote appears to require separate CSS files to be provided to start unit testing whereas for Svelte the CSS is embedded in the part of the .svlete file.