CSS v-bind includes absolute path, thus breaking tests running on different machines

[alvaromat]

Subject of the issue

Using v-bind in css styles creates an html output that includes the absolute path:

Steps to reproduce

Component with a style binding:

<template>
  <div>
    hello
  </div>
</template>
<script setup>
const margin = ref('40px')
</script>
<style scoped>
div {
  margin: v-bind(margin);
}
</style>

Then using jest snapshots:

import { shallowMount } from '@vue/test-utils'
import Component from './Component.vue'

  it('renders correctly', () => {
    wrapper = shallowMount(Component)
    expect(wrapper.html()).toMatchSnapshot()
  })

The snapshot created:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders correctly 1`] = `
"<div style="--/Users/alvaro/Documents/test-project/Component.vue-margin: 0;">
  hello
</div>"
`;

Expected behaviour

The snapshot shouldn't contain the absolute path, so it doesn't break between machines:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders correctly 1`] = `
"<div style="--Component.vue-margin: 0;">
  hello
</div>"
`;

Actual behaviour

The snapshot contains an absolute path, so running the same test on a different path/machine will fail.

Possible Solution

Name the CSS variable differently.

[qnhat358]

@alvaromat Have you fixed it?

[ShGKme]

This is not a part of @vue/test-utils. The error is caused on SFC transform for Jest by @vue/vue3-jest.
See:

• Test fails to run when using CSS v-bind and parent directory starts with "x" vue-jest#544
• v-bind(css) + number prefix folder path + windows : make a syntax error vue-jest#549