Jest: Importing style in React component leads to weird error

[mschipperheyn]

Hi,

I'm trying to test a number of React components that import relative styles in an "absolute way".

import styles from 'screens/siteStyles.css';

const store = configureStore({});

const App = () => (
   <div className={styles.container}>
[...]

I get the following error during testing

var _siteStyles = var _siteStyles2 = _interopRequireDefault(_siteStyles);

SyntaxError: Unexpected token var

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
      at Object.<anonymous> (server/middleware/reactApplication/index.js:16:766)
      at Object.<anonymous> (server/index.js:14:25)

package.json

"jest": {
    "moduleNameMapper": {
      "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
        "<rootDir>/internal/jest/assetMock.js",
      "^.+\\.(css|less|scss|sass|less)$": "<rootDir>/internal/jest/styleMock.js"
    },
    "modulePaths": ["<rootDir>/shared"],
    "collectCoverageFrom": ["s<rootDir>/shared/**/*.{js,jsx}"],
    "snapshotSerializers": ["<rootDir>/node_modules/enzyme-to-json/serializer"],
    "testPathIgnorePatterns": ["<rootDir>/(build|internal|node_modules|flow-typed|public)/"],
    "setupTestFrameworkScriptFile": "<rootDir>/internal/jest/setup",
    "transform": {
      "^.+\\.(js)$": "<rootDir>/node_modules/webpack-babel-jest"
    }
  },
"devDependencies": {
    "assets-webpack-plugin": "3.5.1",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "^21.0.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-syntax-decorators": "^6.13.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-react-constant-elements": "^6.23.0",
    "babel-plugin-transform-react-inline-elements": "^6.22.0",
    "babel-plugin-transform-react-jsx-self": "6.22.0",
    "babel-plugin-transform-react-jsx-source": "6.22.0",
    "babel-plugin-transform-react-pure-class-to-function": "^1.0.1",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.8",
    "babel-plugin-transform-remove-strict-mode": "^0.0.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-3": "6.24.1",
    "babel-template": "^6.26.0",
    "chokidar": "1.7.0",
    "component-webpack-resolver-plugin": "^2.0.2",
    "css-loader": "^0.28.7",
    "enzyme": "2.9.1",
    "enzyme-to-json": "1.5.1",
    "eslint": "^4.6.1",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-plugin-import": "2.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.3.0",
    "extract-text-webpack-plugin": "3.0.0",
    "file-loader": "0.11.2",
    "glob": "7.1.2",
    "happypack": "3.0.3",
    "html-webpack-plugin": "^2.30.1",
    "husky": "0.14.3",
    "ignore-styles": "^5.0.1",
    "jest": "^21.0.1",
    "jest-cli": "^21.0.1",
    "lint-staged": "^4.1.2",
    "md5": "2.2.1",
    "modernizr-loader": "1.0.1",
    "node-notifier": "5.1.2",
    "prettier": "^1.6.1",
    "prettier-eslint": "^7.1.0",
    "prettier-eslint-cli": "^4.3.0",
    "react-addons-test-utils": "15.6.0",
    "react-hot-loader": "3.0.0-beta.6",
    "react-test-renderer": "15.6.1",
    "regenerator-runtime": "^0.11.0",
    "rimraf": "2.6.1",
    "semver": "5.3.0",
    "source-map-support": "^0.4.17",
    "style-loader": "0.18.2",
    "supertest": "^3.0.0",
    "webpack": "^3.5.6",
    "webpack-babel-jest": "^1.0.4",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-hot-middleware": "^2.19.0",
    "webpack-md5-hash": "0.0.5",
    "webpack-merge": "^4.1.0",
    "webpack-node-externals": "1.6.0"
  }

setupTestFrameworkScriptFile.js

require('babel-polyfill');
require('iconv-lite').encodingExists('foo');

Any suggestions?

[cpojer]

Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions. Thank you :)

[mschipperheyn]

I did. No luck

[carlosmarte]

@mschipperheyn I would check your webpack config. confirm the .css loader is setup correctly. This error will happen is your css is not compile correctly by webpack before the JS runtime executes.

[carlosmarte]

@mschipperheyn also try "moduleNameMapper": { "\\.(scss)$": "<rootDir>/__mocks__/styleMock.js", "\\.(svg)$": "<rootDir>/__mocks__/svgMock.js" }

read more: https://facebook.github.io/jest/docs/en/webpack.html

[mschipperheyn]

I managed to solve this through .babelrc

Here it is for posterity

{
  "plugins": ["transform-class-properties", "syntax-decorators", "transform-decorators-legacy"],
  "env": {
    "development": {
      "presets": [
        ["env", { "targets": { "node": true } }],
        ["es2015", { "modules": false }],
        "stage-0",
        "react"
      ],
      "plugins": ["transform-react-jsx-self", "transform-react-jsx-source"]
    },
    "production": {
      "presets": [
        ["env", { "targets": { "node": true } }],
        ["es2015", { "modules": false }],
        "stage-0",
        "react"
      ],
      "plugins": [
        "transform-remove-strict-mode",
        "transform-react-remove-prop-types",
        "transform-react-constant-elements",
        "transform-react-pure-class-to-function",
        "transform-react-inline-elements"
      ]
    },
    "test": {
      "presets": [
        ["env", { "targets": { "node": true } }],
        ["es2015", { "modules": false }],
        "stage-0",
        "react"
      ],
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}