Invalid CSS causes test failure with cryptic error message

[BernieSumption]

I've solved this for myself by fixing the invalid CSS, but am filing an issue as the process of figuring out what was wrong took a while. The issue is that invalid CSS produces a runtime error as jest-styled-components tries to parse the CSS.

I'm not sure what is more appropriate behaviour in the event of invalid CSS, presumably you need to parse the CSS to be able to insert the right snippet into the snapshot. I guess the options are to fail with a more useful error message directing people to fix their CSS and printing out the invalid CSS, or put something like /* Error: could not parse CSS */ into the snapshot itself. Personally I'd go for the first.

Stack trace:

undefined:26:225: missing '{'

      19 |   it("renders correctly", () => {
      20 |     const component = mount(<MyComponent />);
    > 21 |     expect(component).toMatchSnapshot();
         |                       ^
      22 |   });
      23 |
      24 |   it("renders without error", () => {

      at error (node_modules/css/lib/parse/index.js:62:15)
      at declarations (node_modules/css/lib/parse/index.js:248:25)
      at rule (node_modules/css/lib/parse/index.js:561:21)
      at rules (node_modules/css/lib/parse/index.js:118:70)
      at stylesheet (node_modules/css/lib/parse/index.js:81:21)
      at Object.<anonymous>.module.exports [as parse] (node_modules/css/lib/parse/index.js:565:20)
      at getCSS (node_modules/jest-styled-components/src/utils.js:51:14)
      at getStyle (node_modules/jest-styled-components/src/styleSheetSerializer.js:62:15)
      at Object.print (node_modules/jest-styled-components/src/styleSheetSerializer.js:104:19)
      at printPlugin (node_modules/pretty-format/build/index.js:287:16)
      at printer (node_modules/pretty-format/build/index.js:332:12)
      at plugin.serialize.plugin.print.valChild (node_modules/pretty-format/build/index.js:289:23)
      at Object.print (node_modules/enzyme-to-json/createSerializer.js:22:14)
      at printPlugin (node_modules/pretty-format/build/index.js:287:16)
      at prettyFormat (node_modules/pretty-format/build/index.js:485:16)
      at Object.throwingMatcher (node_modules/expect/build/index.js:322:33)
      at Object.<anonymous> (src/components/screens/click-and-collect/__tests__/collection-point.test.tsx:21:23)

Invalid CSS in question:

... skipping 22 valid lines
/* sc-component-id: Distance-hPorFt */
.Distance-hPorFt {} .hYOTfE{height:17px;line-height:17px;background:url(process:process(src,filename) { return `module.exports = ${JSON.stringify(path.basename(filename))};`; };) no-repeat 0 0 / 32px 17px;padding-left:52px;}

(As you can see, my CSS was invalid because I was accidentally interpolating code into it, rather than calling a function and interpolating the return value :)

[MicheleBertoli]

Thank you very much @BernieSumption for opening this issue and describing the problem you experienced.
I strongly believe handling this kind of errors would be a great functionality for the library.

Do you have time to work on a PR?
I'll be happy to review it.

[BernieSumption]

I probably have time to work up a PR for the error reporting option, since that's not going to require much knowledge of the library internals. What should the wording be? First draft for comment:

jest-styled-components could not create a snapshot because the CSS is invalid.
CSS parsing failed on line 6 column 52 in the following CSS:

      /* sc-component-id: sc-global-2942264176 */
      html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;} body{line-height:1;font-family:Arial,Helvetica,sans-serif;color:#333333;} ol,ul{list-style:none;} blockquote,q{quotes:none;} blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;} table{border-collapse:collapse;border-spacing:0;}
      /* sc-component-id: PrimaryButton-twvSS */
      .PrimaryButton-twvSS {} .fUuynj{padding:20px;border-radius:4px;background-color:#424242;border:solid 1px #727272;text-transform:uppercase;color:#fff;font-size:14px;width:100%;}
      /* sc-component-id: RegularButton-eYfpTt */
      .RegularButton-eYfpTt {} .eHPMOO{padding:10px 20px;) no- margin:10px;}

      19 |   it("renders correctly", () => {
      20 |     const component = mount(<MyComponent />);
    > 21 |     expect(component).toMatchSnapshot();
         |                       ^
      22 |   });
      23 |
      24 |   it("renders without error", () => {

      at error (node_modules/css/lib/parse/index.js:62:15)
      at declarations (node_modules/css/lib/parse/index.js:248:25)
      at rule (node_modules/css/lib/parse/index.js:561:21)
      ... rest of snapshot ...

My only thought is that there's a lot of CSS in there. I wonder if there's a utility function we can call in Jest to format it nicely as they've done with the test case file above the stack trace. Or, can we rely on each css selector being one line long, so we only need to show the line and the one above, i.e.

CSS parsing failed on line 2 column 52 in the following CSS:

      /* sc-component-id: RegularButton-eYfpTt */
      .RegularButton-eYfpTt {} .eHPMOO{padding:10px 20px;) no- margin:10px;}

[MicheleBertoli]

Thank you very much, @BernieSumption.

The error thrown when parse fails, contains reason, line and column (see docs) which we could use to extract the broken CSS from getStyles.
So, I'm more inclined to go with the second solution, where we show only a few lines.

Please ping me anytime if you need help with the internals.

[BernieSumption]

Cool, I've dropped it onto my TO-DO list, I'll get round to it next time I've got a couple of hours slow time :)

[quantizor]

The CSS parser has been upgraded from the old css package to @adobe/css-tools v4.4.x since this was filed. Error messages are slightly better (e.g., :1:23: missing '}') but still only show line:column positions without any surrounding CSS context.

I verified that getCSS() in src/utils.js:42 calls css.parse(getStyle()) with no error wrapping—the raw parse error bubbles up directly. A try/catch that shows the offending CSS lines (as @MicheleBertoli suggested—"show only a few lines") would still be a welcome improvement.

Keeping this open as a valid enhancement request.

[quantizor]

Fixed in PR #456 (commit 6a7e0ad). Invalid CSS now produces a descriptive error showing the offending rule isolated on its own line, with a caret pointing at the exact parse error position and surrounding rules for context. This will ship in v7.3.1.