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.