testing-library/svelte-testing-library

Snapshot tests fail on changed CSS class names inside Github action

TeemuKoivisto opened this issue · 4 comments

TeemuKoivisto commented

Hey,

so not sure what exactly is the main cause of this. But I figured since I am using testing-library's render method this could be the first place to ask.

So I have this project https://github.com/TeemuKoivisto/prosemirror-dev-toolkit where I just recently readded unit tests using Vitest. It's mostly been a nice breathe of fresh air coming from Jest. Yet there's one problem still remaining.

I have a Github action pipeline where I run unit tests using yarn test:unit. These, at the moment, fail due to class names being different in the snapshot in this test:

                    <ul
-                   class="tree-view svelte-tree-view s-kiBEL6mEiIqN"
+                   class="tree-view svelte-tree-view s-nJtgFkeMYUo5"
                    >

and so on. Locally of course the tests run fine. Is this a bug or have I missed something?

yanick commented

This is not a bug. The per-component class names are not guaranteed to be the same across different machines. Off the top of my head, there are two things you can try:

  1. In your svelte configuration for tests, change the csshash parameter t(https://svelte.dev/docs#compile-time-svelte-compile) o be a function that returns the empty string.
  2. write a vitest custom serializer (https://vitest.dev/guide/snapshot.html#custom-serializer) that strips off the custom css classes.
TeemuKoivisto commented

Okay thanks. May not be a bug but pretty frustrating thing to configure by yourself I might say.

I didn't want to write my own custom serializer so I tried passing my own cssHash option. Interestingly, passing it directly to @sveltejs/vite-plugin-svelte compilerOptions:

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte({
    compilerOptions: {
      cssHash: ({ hash, css, name, filename }) => {
        return `s-${name}-${hash(css)}`;
      }
    }
  })],
  test: ...
})

didn't work. Only using experimental options I managed to bypass the default CSS class name generation:

  plugins: [svelte({
    experimental: {
      dynamicCompileOptions: () => {
        return {
          cssHash: ({ hash, css, name, filename }) => {
            return `s-${name}-${hash(css)}`;
          }
        }
      }
    }
  })],
  test: ...

So I'm wondering will this solution suffice for the long run or will it break down the road?

  • 👍1
yanick commented

So I'm wondering will this solution suffice for the long run or will it break down the road?

It might have to be tweaked if svelte takes the configuration out of experimental. But since this is a svelte behavior, and doesn't involve svelte-testing-library proper, I'll close the issue.

yairkukielka commented

You might be interested in this vitest css hash option, specially if you're using snapshots:
https://vitest.dev/config/#css-modules-classnamestrategy
Use 'stable'

  • 👍1