Using '@fluentui/jest-serializer-merge-styles' with vitest

[Cam-Bloom]

Problem

In our project we are using vitest with fluentUI, we have snapshot tests which need the classNames serialized, I have tried adding the the serializer both in config and in our setupTests file using expect.addSnapshotSerializer but neither of these seem to work. How would I setup my testing to include the serializer?

Attempted solutions

Adding in config with string

vite.config.ts

export default defineConfig({
    // other config
     test: {
        globals: true,
        environment: 'jsdom',
        setupFiles: './setupTests.ts',
        testTimeout: 10000,
        coverage: {
            reporter: ['text', 'html'],
            exclude: ['node_modules/', 'setupTests.ts'],
        },
        snapshotSerializers: ['@fluentui/jest-serializer-merge-styles'],
    },
})

Adding in config with all import

vite.config.ts

import * as fluentSerializerMergeStyles from '@fluentui/jest-serializer-merge-styles';
// other imports 

export default defineConfig({
    // other config
     test: {
        globals: true,
        environment: 'jsdom',
        setupFiles: './setupTests.ts',
        testTimeout: 10000,
        coverage: {
            reporter: ['text', 'html'],
            exclude: ['node_modules/', 'setupTests.ts'],
        },
        snapshotSerializers: [fluentSerializerMergeStyles as any],
    },
})

Adding in config in setupTests

as in other discussion #4233
setupTests.ts

import * as fluentSerializerMergeStyles from '@fluentui/jest-serializer-merge-styles';
// other imports 

// other setup 
beforeEach(() => {
    expect.addSnapshotSerializer(fluentSerializerMergeStyles as any);
});