Please consider wrapping the added style string in <style> element

[larsno]

Currently the styles are added to the snapshot string as if writing to a CSS file. However the snapshot file really represents a HTML and so the styles should reside inside a <style> element.

This means a snapshot file can be viewed in a browser as something like:

instead of text with the raw CSS prepended.

This can be simply done by replacing the line:

    let result = `${style}${style ? '\n\n' : ''}${code}`

in the file styleSheetSerializer.js with this line:

    let result = `${style ? '<style>\n' : ''}${style}${style ? '\n</style>\n\n' : ''}`

Even better, if the snapshotSerializer jest-html is ordered after jest-styled-components then the styled-components CSS will be included in its preview. (Unfortunately I can't get the jest-html serializer to happen after the jest-styled-component serializer. Any ideas?)

[MicheleBertoli]

Thank you very much, @larsno. This is a pretty interesting idea.
It would be a significant breaking change but I can see the value.
I would love to hear other people's opinion on this.

Also, I was able to use the jest-html serializer in this repo - can you please provide more information around your issue?

[larsno]

I have not been able to get the jest-html serializer to happen after the jest-styled-component serializer.

I want the jest-styled-component serializer to produce the output elements with the styles within a <styles> element. Then I want jest-html serailizer to create the equivalent styled HTML output.

I tried this in the test file:

import 'jest-styled-components'     // the only way to add this serializer
import jestHtml from 'jest-html'

expect.addSnapshotSerializer(jestHtml)
...

However the order of the serializers appear to not have changed. Is this related to the unusual way jest-styled-components call addSnapshotSerializer?

The normal way to add jest-html is in the package.json.

[MicheleBertoli]

Hello @larsno, thank you very much for your comment.

The addSnapshotSerializer function works in the following way:

For an individual test file, an added module precedes any modules from snapshotSerializers configuration, which precede the default snapshot serializers for built-in JavaScript types and for React elements. The last module added is the first module tested.

So, if you run expect.addSnapshotSerializer(jestHtml) in you test file, jest-htmlbecomes the first serializer.
However, if you add jest-html using the package.json, jest-styled-components becomes the first serializer (due to the side-effect on import):

"jest": {
  "snapshotSerializers": [
    "jest-html"
  ]
}

I hope this helps, and I'm also happy to review a PR that exports the serializer if needed.

[harshvchawla]

am using this bash script file for now

function createHtmlFromSnap()
{
        origFile=${1}
        newFile=${1}.html
        cp $origFile $newFile
        sed -i 's/<DocumentFragment>/<DocumentFragment><style>/g' $newFile
        sed -i 's/^<div/<\/style><div/g' $newFile
}

would be nice if there was a configurable parameter to wrap css code within <style> tags

Edit: even then, as pointed out by my senior, bootstrap and other external css files wont still be visible in the rendered html making things look different than they actually are

[quantizor]

This is still a valid feature request. The serializer currently prepends CSS as plain text above the component tree in snapshots. Wrapping it in a <style> tag would make snapshots valid HTML fragments, enabling better integration with HTML-based snapshot viewers.

As @MicheleBertoli noted, this would be a breaking change (existing snapshots would need to be updated). Keeping this open as a candidate for a future major version.