Is it possible to add CSS compiled styles into snapshot file for Vue?

[Ky6uk]

Hello. I have a question regarding the snapshot testing. Recently I've used React + styled-components and snapshots were looking like:

exports[`TestComponent`] = `
.c0 {
  padding: 0;
  margin: 0;
}

.c1 {
  display: flex;
  column-gap: 16px;
}

<div
  class="c0"
>
  <div
    class="c1"
  >
    Woof
  </div>
</div>
`;

It was very useful as any style change was failing the test with an exact highlight where the change was made.

So is it possible to add styles in a similar way to snapshots out of the box, but for Vue.js project? 🤔

[sheremet-va]

You can use this: https://github.com/styled-components/jest-styled-components

We don't support snapshotSerializers field right now, but you can create a setupFiles file and put this inside:

import serializer from 'enzyme-to-json/serializer'
import { styleSheetSerializer } from "jest-styled-components/serializer"

expect.addsnapshotSerializer(serializer)
expect.addsnapshotSerializer(styleSheetSerializer)

[Ky6uk]

Sorry, I probably forgot to mention the project is using Vue.js. React was an example.

[Ky6uk]

Ahh, just found my similar question that I've asked three years ago on StackOverflow. It looks like we need to have a proper serializer for Vue.js project and then just use it with Vitest.