jest-styled-components
jest-styled-components copied to clipboard
toHaveStyleRule Can No Longer Match CSS Selectors w/ Single Quotes
Upon trying to upgrade to jest-styled-components 7.0.0 and styled-components 5.0.0 we found that we had several tests failing. Each of the failing tests had a similar modifier structure. That structure being:
input[type='something']
Tracing the disconnect back to hasClassNames we saw that the selectors argument passed to this method had escaped the single quotes while the options exactly matched the error message output.
We confirmed the single quotes were problematic by changing our CSS in JS for the component to use double quotes. Upon doing so the test passed. We're hoping to continue favoring single quotes while writing JS, even if it's CSS in JS.
Below is the relevant CSS and the expect clause. If any other information would be helpful I'm happy to provide it.
CSS
input[type='reset'] {
&:hover {
color: ${({theme}) => theme.colors.white};
background-color: ${({theme}) => theme.colors.blue};
cursor: pointer;
}
}
Expect
expect(container.firstChild).toHaveStyleRule('color', blueLight, {
modifier: "input[type='reset']:disabled",
});
Lastly, I wasn't able to confirm this, but I think the issue may tie all the way back to the recent changes to rehydrateSheetFromTag within styled-components itself. I believe this may be the case as I still saw the single quotes escaped when logging out the matches from your extract in utils.
This is not addressed as of 7.0.3. The root of the issue is the addition of .replace(/['"]/g, '"') to hasClassNames on commit 8c2ea4a0a8789e11707e7f18e76b811e0d70c4c0. I haven't been able to find why this was added.
@probablyup, can this replace be removed or can you elaborate on why it was added?
I should add that this causes a lot of test failures if using the singleQuote preference in prettier, which is our use case, and If this can be reverted back I'm happy to open a PR.
I don't remember specifically, it was a bit ago. I'm not sure if there's harm from removing it other than snapshot churn
@probablyup would you be open to a PR?