useCssVars doesn't output the CSS variables to the style tag

[sevilyilmaz]

Description

I use a prop to define a CSS variable's value with the help of useCssVars function. The test below fails with this error:

    Expected: "<div class=\"root\" style=\"--p: 4;\"></div>"
    Received: "<div class=\"root\"></div>"

       6 |     const wrapper = mount(WithUseCssVars);
       7 |
    >  8 |     expect(wrapper.html()).toBe('<div class="root" style="--p: 4;"></div>');
         |                            ^
       9 |   });
      10 | });
      11 |

WithUseCssVars.vue

<script>
import { ref, computed, useCssVars, useCssModule } from 'vue';

export default {
  props: {
    msg: String,
    padding: {
      type: Number,
      default: 4
    }
  },
  setup(props) {
    const styles = useCssModule();
    const rootClasses = computed(() => ({
      [styles.root]: true,
    }));

    useCssVars(() => ({
      p: props.padding
    }));

    return { rootClasses };
  },
};
</script>

<template>
  <div :class="rootClasses">{{ msg }}</div>
</template>

<style module>
.root {
  padding: calc(2 * var(--p));
}
</style>

WithUseCssVars.test.js

describe('Component', () => {
  it('renders correctly', () => {
    const wrapper = mount(WithUseCssVars);

    expect(wrapper.html()).toBe('<div class="root" style="--p: 4;"></div>');
  });
});

Reproduction link: https://github.com/sevilyilmaz/vue-3-setup-use-css-vars-test

I added two components and tests for them. One of them uses useCssVars and the other one uses a computed value. The computed value outputs the style tag (as expected) but useCssVars doesn't.

Is this an expected behaviour?

[cexbrayat]

@sevilyilmaz Thanks for the reproduction 👌

It sounds like a vue-jest issue to me. @lmiller1990 WDYT?

[lmiller1990]

I think so too. Most likely we need to patch vue-jest and how it CSS modules.