2016-01-08 7 views
9

मैं जेस्ट और बेबेल 6 का उपयोग कर रहा हूं और एक परीक्षण चलाने की कोशिश कर रहा हूं जिसमें .jsx फ़ाइल शामिल है। किसी कारण से, फ़ाइल को .jsx के रूप में नहीं चुना जा रहा है और इसे शुद्ध जेएस के रूप में माना जाता है, जिससे एक रेखा पर त्रुटि होती है जिसमें एक प्रतिक्रिया घटक होता है।जेस्ट के माध्यम से परीक्षण चल रहा है, मुझे शामिल हैं। अप्रत्याशित टोकन '.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' ouch;) –

+0

हाँ, मुझे पता है :(यह एक रेल परियोजना है, इसलिए वहां बहुत घोंसला है। क्या कोई आम है इसके आस-पास जाने का तरीका? मैं अभी तक जेएस परीक्षण से परिचित नहीं हूं। रेलों में एक फंकी ऑटोलोडिंग तंत्र है जो फाइलों को स्वचालित रूप से पायेगा, इसलिए आमतौर पर मेरे परीक्षणों में इसकी आवश्यकता नहीं होती है। –

+0

@ मैट गिब्सन मैं इसका उपयोग करता था। https : //github.com/classflow/import-alias reergymerej

उत्तर

20

इसे फिक्स्ड। मेरे पास गलत फ़ोल्डर में मेरा .babelrc था। यह रूट निर्देशिका में होना चाहिए था। जब मैंने इसे वहां ले जाया, तो यह सब काम किया।

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

उपयोगकर्ता पैकेज.जेसन पर निम्न स्निपेट भी जोड़ सकते हैं: '" बेबेल ": {" प्रीसेट ": [" प्रतिक्रिया "," es2015 "]} ', उन लोगों के लिए जो पैकेज में सबकुछ पसंद करते हैं। जेसन – AceMark

+0

नाइस आपको धन्यवाद ... और अधिक वर्ण –

0

एक और जगह है जहाँ जेस्ट Unexpected token फेंक सकती है जब @connect में उपयोग करते हुए (ट्यूटोरियल के बहुमत में मिलती है) @ पर है। अपने पैकेज.जेसन फ़ाइल में बेबेल-प्लगइन-ट्रांसफॉर्म-सजावट-विरासत को संलग्न करें, npm install चलाएं और सुनिश्चित करें कि आपकी .babelrc फ़ाइल में "presets": ["es2015", "react", "stage-0"] और "plugins": ["transform-decorators-legacy"] हैं।

संबंधित मुद्दे