Unable to add @fluentui/jest-serializer-merge-styles as snapshot serializer within storyshot

[fhdsouza]

Im trying to have storyshots included within storybook with our fluentUI components. I need to enable snapshotSerializer as a fluent provided serializer but I get the error: Type 'string' is not assignable to type 'Plugin' below. As per storyshot documentation, Im supposed to add it here as it is ignored if added in the jest.config file.

Im using:

"@fluentui/jest-serializer-merge-styles": "^8.0.0-beta.0",
 "@fluentui/react": "~7.121.11",

Here's my setup file:

initStoryshots({
configPath: 'src/storybook',
framework: 'react',
test: multiSnapshotWithOptions({}),
stories2snapsConverter: new Stories2SnapsConverter({
snapshotsDirName: '../../../tests/snapshots/'
}),
snapshotSerializers: [
"@fluentui/jest-serializer-merge-styles"
]
});

[ecraig12345]

Based on both the type error and the storyshots plugin documentation, it looks like you need to pass a serializer plugin object (not the name of a serializer plugin) in this context.

import * as jestSerializerMergeStyles from '@fluentui/jest-serializer-merge-styles';
// ...
initStoryshots({
  snapshotSerializers: [jestSerializerMergeStyles],
  // ...
});

[fhdsouza]

Thanks for the quick response @ecraig12345

I tried what you suggested. I get the following error:

Type 'typeof import <path to jest-serializer-merge-styles/lib/index>' is not assignable to type 'Plugin'

Type 'typeof import("/node_modules/@fluentui/jest-serializer-merge-styles/lib/index")' is not assignable to type 'Plugin'.
Type 'typeof import("/node_modules/@fluentui/jest-serializer-merge-styles/lib/index")' is not assignable to type 'OldPlugin'.
Types of property 'print' are incompatible.
Type '(val: string, serialize: () => string, indent: (val: string) => string) => string' is not assignable to type '(val: unknown, print: Print, indent: Indent, options: PluginOptions, colors: Colors) => string'.
Types of parameters 'val' and 'val' are incompatible.
Type 'unknown' is not assignable to type 'string'.

[ecraig12345]

Under the circumstances I'd recommend casting the plugin to the expected type or just to any. The mismatch in this case seems extremely unlikely to cause runtime errors, and having completely matching types here isn't as critical since it's just a setup file.