2016-01-08 4 views
9

.jsxの含まれたファイルで `予期しないtoken`を取得します。何らかの理由で、ファイルが.jsxのよう拾って反応成分を有するライン上のエラーにつながる、純粋なJSとして扱われるように思われていません。は、私は冗談とバベル6を使用して.jsxのファイルを含むテストを実行しようとしています

これはテストです:

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) 

    }) 
    }) 
}); 

私のpackage.jsonはここにある:

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

そして、私はこのようなnpm test

マイ.babelrcルックスと、コマンドラインで実行していますよ:

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

'SearchPathの=」../../../../../ app'痛い;) –

+0

ええ、私はそれはRailsのプロジェクトなので、ネストの多くがあります:(知っている一般的なのは、あります。それを回避する方法は?私はまだJSのテストに精通していません.Railsは自動的にファイルを見つけるファンキーなオートローディングの仕組みを持っていますので、これは私のテストでは通常必要ありません。 –

+0

@MattGibson私はこれを使用していました。 ://github.com/classflow/import-alias reergymerej

答えて

20

修正済みです。私は.babelrcを間違ったフォルダに入れました。それはルートディレクトリにあったはずです。私がそこに移動したとき、それはすべて働いた。

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

ユーザーは、package.jsonに次のスニペットを追加することもできます: '' babel ':{"presets":["react"、 "es2015"]} '、package.json – AceMark

+0

NICEのすべてを好きな人のために..ありがとうございました。そしてそれ以上の文字 –

0

@connectで使用するときに冗談がUnexpected tokenをスローすることが別の場所には、(チュートリアルの大多数に適合している)@です。 、あなたのpackage.jsonファイルでバベル・プラグイン・変換・デコレーター・レガシーを取り付けnpm installを実行し、ライン"presets": ["es2015", "react", "stage-0"]"plugins": ["transform-decorators-legacy"]があなたの.babelrcファイルであることを確認してください。

関連する問題