Running test via jest, I get `Unexpected token` in included .jsx files

Question

I am using jest and Babel 6 and trying to run a test that includes a .jsx file. For some reason, the file is not being picked up as .jsx and seems to be treated as pure js, leading to the error on a line that has a React component.

This is the test:

var searchPath = '../../../../../app/assets/javascripts/components/navigation/search_icon.js.jsx';
jest.dontMock(searchPath);

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils'

const SearchIcon = require(searchPath);

describe('components', () => {
  describe('SearchIcon', () => {
    it('Should dispatch an action to toggle the search bar when clicked', () => {

      var icon = TestUtils.renderIntoDocument(
        <SearchIcon labelOn="On" labelOff="Off"/>
      );

      // Smoke test - I can't even get this far :(
      expect(true).to.eq(true)

    })
  })
});

My package.json is here:

{
  "name": "fd-v5-web",
  "version": "1.0.0",
  "description": "Farmdrop mobile site",
  "dependencies": {
    "babel-preset-es2015": "^6.0",
    "babel-preset-stage-0": "^6.0",
    "babel-preset-react": "^6.0",
    "babelify": "~>7.2",
    "browserify": "~> 10.2.4",
    "browserify-incremental": "^3.0.1",
    "classnames": "~>2.1",
    "immutable": "^3.7.5",
    "lodash": "~3.9.3",
    "moment": "~2.10.3",
    "react": "^0.14.3",
    "react-redux": "^4.0.0",
    "react-dom": "^0.14.6",
    "react-tools": "^0.13.1"
  },
  "engines": {
    "node": "4.0.0",
    "npm": "2.1.x"
  },
  "devDependencies": {
    "babel-jest": "*",
    "jest-cli": "*",
    "react-addons-test-utils": "^0.14.3"
  },
  "scripts": {
    "test": "BABEL_JEST_STAGE=0 jest"
  },
  "jest": {
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react",
      "<rootDir>/node_modules/react-dom",
      "<rootDir>/node_modules/react-addons-test-utils",
      "<rootDir>/node_modules/fbjs"
    ],
    "testFileExtensions": [
      "js"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "es6"
    ]
  }
}

And I'm running on the command line with npm test

My .babelrc looks like this:

{
  "presets": [
     "react",
     "es2015"
  ]
}

Answer 1

Fixed it. I had my .babelrc in the wrong folder. It should have been in the root directory. When I moved it there, it all worked.

{
  "presets": [
     "react",
     "es2015"
  ]
}

Answer 2

Another place where Jest may throw Unexpected token is on @ when using in @connect (meets in majority of tutorials). Attach babel-plugin-transform-decorators-legacy in your package.json file, run npm install and make sure there are lines "presets": ["es2015", "react", "stage-0"] and "plugins": ["transform-decorators-legacy"] in your .babelrc file.