Styled-jsx import issue when running test with Jest

[thangngoc89]

I'm not sure where to file an issue for this. I have 3 potential places in mind: jest, styled-jsx and next.js
Since the project that I'm working on is a next.js app, I'll start here.

I have .babelrc file like this

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    "inline-react-svg"
  ],
  "env": {
    "test": {
      "presets": [
        "latest",
        "react"
      ]
    }
  }
}

next.js version: 2.0.0-beta-19

When I run test with Jest, it throws a syntax error:

/home/khoa/web/thichdoc/src/components/BuildBlocks/Button.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){/* istanbul ignore next */"use strict";Object.defineProperty(exports, "__esModule", { value: true });var _defineProperty2 = require("/home/khoa/web/thichdoc/node_modules/babel-runtime/helpers/defineProperty");var _defineProperty3 = _interopRequireDefault(_defineProperty2);import _JSXStyle from "styled-jsx/style";var _style = require("styled-jsx/style");var _style2 = _interopRequireDefault(_style);var /* istanbul ignore next */_react = require("/home/khoa/web/thichdoc/node_modules/react/react.js"); /* istanbul ignore next */var _react2 = _interopRequireDefault(_react);
                                                                                                                                                                                                                                                                                                           
    SyntaxError: Unexpected token import

The highlighted part is this line import _JSXStyle from "styled-jsx/style

If I remove next/babel preset, jest runs tests just fine.
Since I can't find a way to disable babelrc inheritance, I have to do some weird tricks with my .babelrc file like this:

{
  "plugins": [
    "inline-react-svg"
  ],
  "env": {
    "dev": {
      "presets": [
        "next/babel"
      ]
    },
    "production": {
      "presets": [
        "next/babel"
      ]
    },
    "test": {
      "presets": [
        "react",
        "latest"
      ]
    }
  }
}

[arunoda]

Use babel-plugin-transform-es2015-modules-commonjs babel plugin as well. We don't transpile import/export statements in our preset. (That's to support webpack's tree shaking)

But it'll have issues in the Node.js. So, you need to use the ^^^ plugin.

[arunoda]

@thangngoc89 actually, we need to use the es2015 preset. I've updated the Jest example.
See: https://github.com/zeit/next.js/tree/master/examples/with-jest

[arunoda]

Reopen, if the issue still exists.

[thangngoc89]

@arunoda as you can see in my config, I'm using babel-preset-latest, it covers es2015 as well as es2016.

If you looks closely to the error dump, you can see that only the styled-jsx import statement wasn't transpiled by babel, others statements are transpiled properly.

If I remove next/babel, the problem goes away. It's probably because of style-jsx tags aren't transpiled at all I guess.

[thangngoc89]

By the way, I can't reopen this issue.

[arunoda]

@thangngoc89 I'll try with styled-jsx.

[arunoda]

@thangngoc89 I've updated the with-jest example to styled-jsx and it works pretty well.

Could you send us a sample repo?

[thangngoc89]

@arunoda You updated the with-jest example with next/babel in each environment just like my workaround so there shouldn't be a problem for me right now. But it looks weird to me.

[TonyHYK]

@arunoda I'm following the with-jest example which well with vanilla styled-component, however, I'm also using styled-jsx-plugin-sass on top of that, and I have problems configuring it with jest. Here's my current .babelrc

{
  "env": {
    "development": {
      "presets": [
        [
          "next/babel",
          {
            "styled-jsx": {
              "plugins": [
                [
                  "styled-jsx-plugin-sass",
                  {
                    "sassOptions": {
                      "includePaths": ["./client/styles"]
                    }
                  }
                ]
              ]
            }
          }
        ]
      ]
    },
    "production": {
      "presets": [
        [
          "next/babel",
          {
            "styled-jsx": {
              "plugins": [
                [
                  "styled-jsx-plugin-sass",
                  {
                    "sassOptions": {
                      "includePaths": ["./client/styles"]
                    }
                  }
                ]
              ]
            }
          }
        ]
      ]
    },
    "test": {
      "presets": [["env", { "modules": "commonjs" }], "next/babel"]
    }
  },
  "plugins": [["module-resolver", { "root": ["./"] }], "inline-react-svg"]
}