Having issues running React snapshot tests with Preact

[zarahzachz]

I'm working on a React design system project that also provides a Preact version of the code. We're using all the aliasing documented in Preact's docs (Jest, Webpack). Things are running pretty smoothly, but we are noticing when we run Preact against our unit tests (which use React) many snapshot tests fail.

Looking at the broken snapshot tests, there appears to be a difference between how React and Preact treat falsey values; many of the snapshots have an attribute set to an empty string; React seems to handle these as expected but Preact strips them out, resulting in the broken snapshot test.

For instance, we have a checkbox component with a checked property. In the unit test, we set props.checked = true and the snapshot generates something like the following:

React:

<input
    checked=""
    name="foo"
    type="checkbox"
/>

Preact:

<input
    name="foo"
    type="checkbox"
/>

React's code indicates the checkbox is checked, however because it's falsey (empty string) Preact strips it out. At least that's our assumption based on this code we've found in the Preact project.

Is there some kind of configuration we can set with preact/compat to ignore removing falsey attributes? Or do you know of a way to get React to behave more inline with Preact?

[rschristian]

How are you generating your snapshots? RTS will transform <input checked="" name="foo" type="checkbox" /> to <input checked name="foo" type="checkbox"/>, it shouldn't strip it out.

Simple Example

[zarahzachz]

That's good to know! 🎉

We were thinking there was an issue with our Preact setup because it's the newest addition to our project, but sounds like this is a pre-existing issue with our testing setup so we'll investigate that further.

Follow-up question: Am I to understand that our preact/compat project should work with our pre-existing unit tests written using React Testing Library (once we get our snapshots working correctly)?

I saw an issue on RedwoodJS where they were creating a Preact version and someone mentioned needing to convert React Testing Library imports to Preact Testing Library imports despite using the preact/compat settings. Is this something we need to do as well?

[rschristian]

No, you'll need to use Preact Testing Library, unfortunately.

The React version reaches quite deep into React's internals which isn't something that preact/compat can (or could) reasonably handle.

[zarahzachz]

Thank you! This is very helpful!