Feature request: Support for testing v-bind() in scoped CSS?

[oasjohn]

PROBLEM
I'm utilizing v-bind() in scoped CSS classes, to apply style rules to component instances based on reactive properties. I'm able to use wrapper.classes('foo') to locate classes that have been applied, but cannot seem to find a way to write a test that verifies that the v-bind has properly applied the updated rules.

Is there a different approach I should be taking, or is there a way to parse the CSS class rules within test-utils without having to write something lower level?

[cexbrayat]

Hi @oasjohn

I think the support for CSS is not great at the moment, we also had issues like #1704

Are you using jsdom or happy-dom? Sometimes jsdom gives better results. But, AFAIK, we don't have tests that check v-bind in VTU, so maybe this doesn't work at all.

Can you provide us a small repro online using https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/vue?initialPath=__vitest__ ? We'll try to take a loook

[oasjohn]

Thanks - I worked up a super simple example here
https://stackblitz.com/edit/vitest-dev-vitest-gebnpv?file=components/Binder.vue
The Binder component has a scoped css class that uses v-bind to alter the rule based on the setBorder() function call.

[cexbrayat]

Thanks. I don't see the failing test though? Can you also remove the other components and tests that we don't need to keep the repro focused on the issue?

[oasjohn]

Ah, I've cleaned it out a bit.
But there's no failing test because I need to test if the result of the click triggered the v-bind to alter the CSS rule. The component just has the class "outer" applied to it, and that does not change. The underlying CSS rule for the scoped class does.

[oasjohn]

Just digging into this some more, I'm wondering if CSS, and in particular Scoped Styles are even calculated when a component is mounted within vue-test-utils. I was going to try accessing the expected attributes directly, or use getComputedStyle to see what the resultant rules were after applying all classes, but there's no inline style data rendered as expected.

For example, if you have a custom label with the following template:

<template>
    <div class="outer-style">{{ text }}</div>
</template>

And in the SFC, a scoped style such as...

<style scoped>
    .outer-style {
        display: inline-block;
        color: #f00;
        padding: 5px;
    }
</style>

This is what should be rendered (xyz123 is just the hash Vue assigns):

<div class="outer-style" data-v-xyz123 style="--xyz123-display:inline-block; --xyz123-color:#f00; --xyz123-padding:5px;">Some Text</div>

However, when I log out the HTML from the wrapper within a test, this is what I get:

<div class="outer-style" data-v-xyz123>Some Text</div>

[cexbrayat]

Ok, so I dug a bit into this, and it turns out vitest use the cjs build of vue, which does nothing for useCssVars (the helper used behind v-bind).

By changing the vitest config to force the usage of Vue ESM packages, the issue goes away:

resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js',
      '@vue/runtime-dom': '@vue/runtime-dom/dist/runtime-dom.esm-bundler.js'
    }
  },

I made a very simple repro here if you want to take a look.
https://stackblitz.com/edit/vitest-dev-vitest-xjwpf8?file=vitest.config.ts

This might be related to how Vue declares its various formats, but I'm far from being an expert on this (see vuejs/core#4814 )

Anyway, I don't we need to do anything special in VTU, as it seems to work 👍

[oasjohn]

Thanks, I'll give that a spin.

[oasjohn]

Worked like a charm. Thanks so much!