Template literal tag breaks Babel with Jest coverage

[Asherlc]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

When using the css template literal tag from styled-jsx/css, and running Jest tests with --collectCoverage=true raises the following error(does not occur without code coverage):

body[1] of BlockStatement expected node to be of a type ["Statement"] but instead got "SequenceExpression"

      at validate (node_modules/babel-types/lib/definitions/index.js:109:13)
      at validator (node_modules/babel-types/lib/definitions/index.js:57:7)
      at Object.validate (node_modules/babel-types/lib/definitions/index.js:190:10)
      at validate (node_modules/babel-types/lib/index.js:505:9)
      at Object.builder (node_modules/babel-types/lib/index.js:466:7)
      at NodePath.replaceExpressionWithStatements (node_modules/babel-traverse/lib/path/replacement.js:206:54)
      at NodePath.insertBefore (node_modules/babel-traverse/lib/path/modification.js:52:10)
      at processTaggedTemplateExpression (node_modules/styled-jsx/dist/babel-external.js:102:16)
      at node_modules/styled-jsx/dist/babel-external.js:151:7
          at Array.forEach (<anonymous>) 

#### Environment (include versions)

* Node v8.9.3
* styled-jsx (version): 2.2.6

Babel presets used:

 "presets": [
    "react",
    "latest",
    "next/babel"
  ]

#### Did this work in previous versions?

Not sure

[giuseppeg]

please create a testcase that we can clone and try out

[damusnet]

Hi,

I have narrowed it down with a github repo: https://github.com/damusnet/hello-nextjs

This works: https://github.com/damusnet/hello-nextjs/blob/b85d11c33ea5c9d4c4f4e2bbc75c0f1e371db059/styles/index.js

import css from "styled-jsx/css";

import colors from "./colors";

export default css`
  h1 {
    color: ${colors.green};
  }
`;

But this breaks coverage: https://github.com/damusnet/hello-nextjs/blob/31650c88b8292430056c8c336d781b94c3dc18f9/styles/index.js

import css from "styled-jsx/css";

import colors from "./colors";

const style = css`
  h1 {
    color: ${colors.red};
  }
`;

export default style;

Even though they both compile perfectly well, and tests run. Just not coverage.

I don't think it's a styled-jsx specific issue. More likely something between babel and jest coverage.

[bkempner]

Also happening for me, would be nice to see a fix.

[giuseppeg]

is this still an issue? can you upgrade to styled-jsx v3

[Asherlc]

It appears to be working now for me

[Asherlc]

Actually no, now I'm getting both the above error and ReferenceError: css is not defined

[ssylvia]

I seem to be running into the same issue.

[email protected]

[l4lilulelo]

Did anyone solve this issue? I am facing the same issue with jest --coverage when using styled-jsx.

[giuseppeg]

still an issue with 3.2.1?

[Asherlc]

It appears to be, yes

[scythargon]

Same here:(

UPD: Hmm, seems to be working with "styled-jsx": "latest" in the package.json.

UPD2: nope it freaking doesn't. Screw NPM.

[rishitells]

Any updates on this issue? We are stuck with the same.

[jorisre]

Hi ! The following works for me (with Next.js) :

// .babelrc.js
const isTest = String(process.env.NODE_ENV) === 'test';

module.exports = {
  presets: [['next/babel', { 'styled-jsx': { 'babel-test': isTest } }]],
}

https://github.com/vercel/styled-jsx#rendering-in-tests https://nextjs.org/docs/advanced-features/customizing-babel-config