Jest: SyntaxError: Unexpected token . for node_modules library (flexboxgrid)

[jellyfish-tom]

Hello,

my fight has lasted 3 days already and I simply cannot get Jest to work.
Trying to setup it with webpack/babel/react/redux and after handling different errors till now (like not recognizing import or adding .scss to styles imports in .jsx files so Jest can recognize and mock them, I came to the point where I get the error I cannot find solution for.

I replaced some paths with $myProjectPath but there is absolute path there, so no worries.

Current behavior:

When running npm run test am getting:

FAIL  front/src/scripts/components/by_routes/login/sign_in/__tests__/SignIn-test.js
  ● Test suite failed to run

    $myProjectPath/node_modules/flexboxgrid/dist/flexboxgrid.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.container-fluid,
                                                                                             ^
    SyntaxError: Unexpected token .

      at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:316:10)
      at Object.<anonymous> (front/src/lib/ui/grid/Grid.jsx:5:46)
      at Object.<anonymous> (front/src/lib/ui/grid/index.js:1:273)

running it with --no-cache and --debug flag gives me:

jest version = 17.0.3
test framework = jasmine2
config = {
  "moduleNameMapper": [
    [
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$",
      "$myProjectPath/front/jest/fileMock.js"
    ],
    [
      "\\.(s?css)$",
      "$myProjectPath/front/jest/styleMock.js"
    ]
  ],
  "automock": false,
  "modulePaths": [
    "$myProjectPath/front/src",
    "$myProjectPath/front/src/vendors",
    "$myProjectPath/front/src/scripts",
    "$myProjectPath/front/src/scripts/components",
    "$myProjectPath/front/src/scripts/models",
    "$myProjectPath/front/src/scripts/providers",
    "$myProjectPath/front/src/scripts/reducers",
    "$myProjectPath/node_modules"
  ],
  "setupFiles": [
    "$myProjectPath/node_modules/babel-polyfill/lib/index.js",
    "$myProjectPath/front/jest/setupFile.js"
  ],
  "transformIgnorePatterns": [
    "node_modules/(?!flexboxgrid)"
  ],
  "rootDir": "$myProjectPath",
  "name": "$myUserName",
  "testRunner": "$myProjectPath/node_modules/jest-config/node_modules/jest-jasmine2/build/index.js",
  "transform": [
    [
      "^.+\\.jsx?$",
      "$myProjectPath/node_modules/babel-jest/src/index.js"
    ]
  ],
  "usesBabelJest": true,
  "bail": false,
  "browser": false,
  "cacheDirectory": "/var/folders/7n/rt2dyl55515d73sz0kt797z80000gn/T/jest",
  "coveragePathIgnorePatterns": [
    "/node_modules/"
  ],
  "coverageReporters": [
    "json",
    "text",
    "lcov",
    "clover"
  ],
  "expand": false,
  "globals": {},
  "haste": {
    "providesModuleNodeModules": []
  },
  "mocksPattern": "__mocks__",
  "moduleDirectories": [
    "node_modules"
  ],
  "moduleFileExtensions": [
    "js",
    "json",
    "jsx",
    "node"
  ],
  "modulePathIgnorePatterns": [],
  "noStackTrace": false,
  "notify": false,
  "preset": null,
  "resetMocks": false,
  "resetModules": false,
  "snapshotSerializers": [],
  "testEnvironment": "jest-environment-jsdom",
  "testPathDirs": [
    "$myProjectPath/"
  ],
  "testPathIgnorePatterns": [
    "/node_modules/"
  ],
  "testRegex": "(/__tests__/.*|\\.(test|spec))\\.jsx?$",
  "testURL": "about:blank",
  "timers": "real",
  "useStderr": false,
  "verbose": null,
  "watch": false,
  "cache": false,
  "watchman": true
}
 FAIL  front/src/scripts/components/by_routes/login/sign_in/__tests__/SignIn-test.js
  ● Test suite failed to run

    $myProjectPath/node_modules/flexboxgrid/dist/flexboxgrid.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.container-fluid,
                                                                                             ^
    SyntaxError: Unexpected token .

      at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:316:10)
      at Object.<anonymous> (front/src/lib/ui/grid/Grid.jsx:5:46)
      at Object.<anonymous> (front/src/lib/ui/grid/index.js:1:273)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        15.705s
Ran all test suites.

Test file looks like this:

jest.unmock('react');
jest.unmock('enzyme');

import React from 'react';
import { shallow } from 'enzyme';

import SignIn from '../SignIn';
debugger;
describe('SignIn component should store inputed values in state', () => {
  function mock() {
  }

  const SignIn = shallow(
    <SignIn onSignInClick = { mock } />
  );

  // wrapper.find('input').simulate('change', {target: {value: 'My new value'}});

  let email     = '[email protected]';
  let password  = '123123';

  SignIn.setState({ email: email });
  SignIn.setState({ password: password });

  expect(SignIn.find(<form />)).to.have.length(1);

  expect(SignIn.state('email')).to.equal(email);
  expect(SignIn.state('password')).to.equal(password);
});

This is relevant part of my package.json:

"scripts": {
    "clean": "rimraf build tests/reports *.log",
    "build": "webpack --config front/webpack/config.build.js --progress",
    "dev": "webpack-dev-server --config front/webpack/config.dev.js --progress",
    "test": "npm run jest",
    "jest": "node ./node_modules/jest-cli/bin/jest.js --no-cache --debug || true",
    "nightwatch": "node node_modules/nightwatch/bin/runner.js",
    "flow": "flow; test $? -eq 0 -o $? -eq 2",
    "lint": "eslint **/*.js **/*.jsx"
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/front/jest/fileMock.js",
      "\\.(s?css)$": "<rootDir>/front/jest/styleMock.js"
    },
    "automock": false,
    "modulePaths": [
      "<rootDir>/front/src",
      "<rootDir>/front/src/vendors",
      "<rootDir>/front/src/scripts",
      "<rootDir>/front/src/scripts/components",
      "<rootDir>/front/src/scripts/models",
      "<rootDir>/front/src/scripts/providers",
      "<rootDir>/front/src/scripts/reducers",
      "<rootDir>/node_modules"
    ],
    "setupFiles": [
      "<rootDir>/front/jest/setupFile.js"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!flexboxgrid)"
    ]
  },
  "devDependencies": {
    "autoprefixer": "6.3.6",
    "babel-core": "6.8.0",
    "babel-eslint": "6.0.4",
    "babel-jest": "12.0.2",
    "babel-loader": "6.2.4",
    "babel-plugin-transform-flow-strip-types": "^6.14.0",
    "babel-polyfill": "6.8.0",
    "babel-preset-es2015": "6.6.0",
    "babel-preset-react": "6.5.0",
    "babel-preset-react-hmre": "1.1.1",
    "babel-preset-stage-0": "6.5.0",
    "css-loader": "0.23.1",
    "enzyme": "^2.6.0",
    "eslint": "^2.10.2",
    "eslint-plugin-react": "5.1.1",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.8.5",
    "flow-bin": "^0.33.0",
    "flow-status-webpack-plugin": "^0.1.7",
    "happypack": "2.1.1",
    "hex64": "0.4.0",
    "html-webpack-plugin": "2.22.0",
    "identity-obj-proxy": "^3.0.0",
    "immutability-helper": "^2.0.0",
    "jest": "^17.0.3",
    "jest-cli": "*",
    "jquery": "^3.1.1",
    "nightwatch": "0.8.18",
    "postcss-loader": "0.9.1",
    "react-test-renderer": "^15.4.0",
    "resolve-url-loader": "1.4.3",
    "rimraf": "2.5.2",
    "sass-loader": "3.2.0",
    "style-loader": "0.13.1",
    "svg-inline-loader": "0.4.1",
    "toolbox-loader": "0.0.3",
    "webpack": "1.13.0",
    "webpack-babel-jest": "*",
    "webpack-dev-server": "1.14.1",
    "webpack-merge": "0.12.0"
  },
  "dependencies": {
    "classnames": "2.2.3",
    "coordinate-systems": "1.1.0",
    "d3": "3.5.16",
    "datamaps": "0.4.4",
    "dateformat": "1.0.12",
    "fast.js": "0.1.1",
    "fbjs": "0.2.1",
    "flexboxgrid": "6.3.0",
    "history": "1.17.0",
    "immutable": "3.8.1",
    "isomorphic-fetch": "2.2.1",
    "lodash": "3.10.1",
    "material-ui": "0.13.4",
    "moment": "2.13.0",
    "node-fetch": "1.5.1",
    "node-sass": "3.4.2",
    "normalize.css": "3.0.3",
    "numeral": "1.5.3",
    "qs": "4.0.0",
    "react": "0.14.8",
    "react-addons-clone-with-props": "0.14.8",
    "react-addons-create-fragment": "0.14.8",
    "react-addons-css-transition-group": "0.14.8",
    "react-addons-pure-render-mixin": "0.14.8",
    "react-addons-test-utils": "0.14.8",
    "react-addons-transition-group": "0.14.8",
    "react-addons-update": "0.14.8",
    "react-d3-components": "0.6.3",
    "react-dom": "0.14.8",
    "react-google-maps": "4.10.1",
    "react-infinite-scroll": "0.1.5",
    "react-motion": "0.3.1",
    "react-pathjs-chart": "0.2.6",
    "react-photoswipe": "0.5.1",
    "react-redux": "2.1.2",
    "react-router": "2.3.0",
    "react-scroll": "0.35.0",
    "react-select": "^1.0.0-beta14",
    "react-tap-event-plugin": "0.2.2",
    "react-toolbox": "*",
    "immutability-helper": "*",
    "react-visibility-sensor": "3.1.1",
    "redbox-react": "1.2.3",
    "redux": "3.5.1",
    "redux-thunk": "1.0.3",
    "scroll-behavior": "0.3.4",
    "store": "1.3.20",
    "svg-inline-react": "0.3.1",
    "truncate": "2.0.0",
    "validator": "^5.7.0"
  }

these are my .babelrc contents:

{
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ],
  "plugins": ["transform-flow-strip-types"]
}

What is the expected behavior?
Working test with no errors I guess.

Node version => 6.2.1
NPM version => 3.9.3
OS => macOS Sierra 10.12

[thymikee]

Hi @azrahel!
Have you seen this thread: https://github.com/facebook/jest/issues/334#issuecomment-158287989?
You can also check a tutorial for Webpack here: http://facebook.github.io/jest/docs/tutorial-webpack.html

Hope that helps you to resolve the issue, but it's most likely not a problem with Jest.

[arnarthor]

Adding

    "transform": {
      "^.+\\.(js)$": "<rootDir>/node_modules/webpack-babel-jest"
    },

to your jest config and installing webpack-babel-jest should fix this problem. If not I've been dealing with this recently and am happy to help.

[thymikee]

Closing this for now, but happy to help if the issue persist :)

[MathieuDoyon]

unfortunately tips from @arnarthor doesn't work for me

[kawikadkekahuna]

Any other ideas? @arnarthor suggestions also didn't work for me.

[cpojer]

You need to update transformIgnorePatterns to not include the specific node_module. By default, it doesn't transform anything in your node modules.

[anurodhsahu]

@MathieuDoyon. Were you able to fix the issue?

[meetbabu]

@MathieuDoyon were you able to resolve the issue?, I have the same/similar issue, I have my internal library under node_modules and getting SyntaxError: Unexpected token error

[heridev]

@MathieuDoyon facing the same issue

[jose920405]

Same issue here

[andreyrivercity]

Same issue. Any ideas on how to work around this? Here is my jest.config.js:

module.exports = {
    moduleFileExtensions: [
        'js',
        'jsx',
        'css'
    ],
    moduleDirectories: [
        'node_modules',
        'tests',
        'm'
    ],
    moduleNameMapper: {
        '\\.(css|less)$': '<rootDir>/tests/styleMock.js'
    }
};

And here is an appropriate part of package.json:

"babel": {
    "env": {
        "test": {
            "plugins": [
                ["transform-es2015-modules-commonjs"]
            ]
        }
    }
}

And styleMock.js

module.exports = {};

Once I'm running npm run jest I'm getting the similar error. Looks like mocking doesn't work for some reason. Using identity-obj-proxy also doesn't help.