Bug: snapshots are mismatching on different platforms

[seahindeniz]

Describe the bug

I have a test case that creates a snapshot of a component and creates a snap file that contains an object with an absolute path of a child component. However, when I push my codes to repo and run GitHub actions, the test fails at the following line

-               "__file": "/var/app/src/components/UI/InIcons.vue",
+               "__file": "/runner/_work/app/app/src/components/UI/InIcons.vue",

This is most likely to related to the different absolute paths on different platforms and users.

To Reproduce

If it's not clear enough, I can try to create one. Just let me know

Expected behavior

Maybe snapshots shouldn't contain any absolute path, or take a configuration to disable absolute paths.

Related information:

  System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M1
    Memory: 92.63 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  npmPackages:
    @vue/test-utils: 2.4.3 => 2.4.3 
    vitest: 0.34.6 => 0.34.6 
    vue: 3.2.41 => 3.2.41 

Additional context

[cexbrayat]

hi @seahindeniz

Can you provide us a small repro online using https://stackblitz.com/github/vuejs/create-vue-templates/tree/main/typescript-vitest?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts ?

It only takes a few minutes, and we'll be able to take a look

[seahindeniz]

Here it is @cexbrayat https://stackblitz.com/edit/github-yh3jfp?file=src%2Fcomponents%2F__tests__%2FTheWelcome.spec.ts The src/components/__tests__/TheWelcome.spec.ts file contains a snapshot of a compound component. When you run npm run test:unit from another environment, you should get a failing test

[seahindeniz]

Here's a repo https://github.com/seahindeniz/github-yh3jfp to fetch it

[cexbrayat]

Thanks. Is there a reason to create a snapshot of the whole wrapper? Usually, you're only interested in wrapper.html() for example

[seahindeniz]

Well, it's kind of arbitrary. Given the repro case, I have used an existing component that uses other components. In my app, I have a single component that uses a small component to add icons. Then I have another component that uses Typography component to add texts with special styles. The need is basically arbitrary and the point is not on testing the wrapper. Yeah, the html api could work but that means creating a custom functionality to create snapshots of a test and read to compare it with html to imitate the same thing.

[cexbrayat]

I'm sorry I don't understand your use case.

Yeah, the html api could work but that means creating a custom functionality to create snapshots of a test and read to compare it with html to imitate the same thing.

What do you mean by that? expect(wrapper.html()).toMatchSnapshot() works out of the box.

In any case, snapshotting the entire wrapper is not a good idea: you get a lot of internal details, and there is no guarantee that this will not change in future VTU versions.

[seahindeniz]

🤦🏻‍♂️, That make sense a lot. I'm not sure where, but I must have read somewhere, and I get the impression of getting a snapshot of the whole component. Christ, what a waste of hours spend

[cexbrayat]

No worries, let's close then.