Skip to content

Styled-jsx import issue when running test with Jest #1037

@thangngoc89

Description

@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"
      ]
    }
  }
}

Metadata

Metadata

Assignees

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions