No CSS output in snapshots when using preact

[silverlight513]

I've recently switched a project from React to use Preact. When the switch happened, I noticed that the snapshots no longer contained any CSS, only the HTML with their classnames.

The app itself works perfectly with styled-components as I've aliased React for preact-compat. I assumed this module would have the same results in both React and Preact.

[MicheleBertoli]

Hello @silverlight513, thanks for the interesting issue.
I never tested the package with Preact so I agree with you that I would expect it to work, I wouldn't assume it actually does :)

Can you please provide a working example to repro the issue?

I tried to run:
yarn add --dev preact preact-compat

and added this to my Jest config:

"moduleNameMapper": {
  "^react$": "preact-compat",
  "^react-dom$": "preact-compat",
  "^create-react-class$": "preact-compat/lib/create-react-class"
}

but it doens't work (I get TypeError: Cannot read property 'ReactCurrentOwner' of undefined).

Thank you very much!

[silverlight513]

Hey @MicheleBertoli, I've created a basic repo with a single component and snapshot test in it for you to look at.

https://github.com/silverlight513/preact-jest-concept

I thought that it might be the preact-render-to-string package that's inhibiting the ability for jest-styled-components to do it's job but I'm also using preact-render-to-string for server side rendering with styled-components.

[MicheleBertoli]

Thank you very much for providing an example, @silverlight513. It was really helpful.

I can confirm the cause of the issue the way preact-render-to-string serializes the component to string (instead of JSON), see preactjs/preact-render-to-string#16

I'm going to leave this open because I'd be happy to fix the issue.
PRs are also welcome :)

[silverlight513]

I came across this package https://github.com/nathancahill/preact-render-to-json which I was hoping would solve the issue but it doesn't have any affect at all.

If I have some free I'd like to have a go at trying to fix the issue but I have no idea of how I'd go about it.

[silverlight513]

@gnarf and I have been taking a look at this today and found a sort of work around to get this working.

The way jest-styled-components checks if an element is a vdom node or not looks like what's stopping us get context to the styled-component stylesheet.
(https://github.com/styled-components/jest-styled-components/blob/master/src/styleSheetSerializer.js#L93)

Here's what we've had to do as the work around - https://github.com/silverlight513/preact-jest-concept/compare/gnarf

@MicheleBertoli, would you be opposed to a PR containing a change in how jest-styled-components tests if an element is a valid vdom node. Most likely something akin to how it's done here - https://github.com/mzgoddard/preact-render-spy/blob/master/snapshot.js#L17

[MicheleBertoli]

Hello @silverlight513 @gnarf.
Thank you very much for investigating further.

I gave a quick look and it seems that:

• preact-render-to-json works as expected, except the components have both class and className (we should remove the former). Do you know if this how Preact is supposed to work with Styled Components?
• your experiment with preact-render-spy works only partially because the class hashes (sc-bdVaJa and sc-bwzfXH) are still there, which would make the snapshots fail when the components change.

I think if we figure out why the components have both class and className (and we fix it), then preact-render-to-json is the way to go.

[silverlight513]

Hey @MicheleBertoli

Unlike React, Preact supports the use of both class and className in it's JSX. Considering that, I'd expect styled-components to be updated in both.

Correct me if I'm wrong but I thought the point of snapshots were that they failed if something changed in a component that was being tested? Is it more that the hash shouldn't be there and only the c1, c2 ... classes?

[MicheleBertoli]

Thank you very much for the explanation, @silverlight513.

Given Preact supports class and className, is it expected for the Styled Components to output both? Do you know where I can find out more information about this?
It seems weird to me but if that's the case we could fix it within this package.

You are perfectly right: the purpose of snapshot testing is telling you when something changes.
However, if you don't remove the hashes and the class names from the snapshots they are going to fail anytime a new component is added - which is not ideal.
You can find more information about the reason why this package exists here.

[MicheleBertoli]

Quick update, @silverlight513.
I opened a PR on preact-render-to-json to get rid of className.

If it'll be merged, then we only need to apply the following diff to this package and it'll support Preact.
(Note: this change replaces the hashes in the correct way even when both class and className are present, but I don't like the idea of having both in the same snapshot).

@@ -82,8 +82,8 @@ const replaceHashes = (result, hashes) =>
   hashes.reduce(
     (acc, className) =>
       acc.replace(
-        new RegExp(`(className="[^"]*?)${className}\\s?([^"]*")`, 'g'),
-        '$1$2'
+        new RegExp(`((class|className)="[^"]*?)${className}\\s?([^"]*")`, 'g'),
+        '$1$3'
       ),
     result
   )

[nathancahill]

Merged and released as 3.6.6.

[MicheleBertoli]

Thank you very much, @nathancahill.

@silverlight513 I updated the package and it works.
I'm merging the branch and publishing v4.8.0 with Preact support.
Yay!