2016-01-08 1 views
9

Я использую шутки и Babel 6 и пытаюсь запустить тест, содержащий файл .jsx. По какой-то причине файл не подбирается как .jsx и, по-видимому, рассматривается как чистый js, что приводит к ошибке в строке с компонентом React.Выполнение теста с помощью шутки, я получаю «Неожиданный токен» в файлах .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

Да, я знаю :(Это проект Rails, поэтому есть много гнездования. Есть ли общий способ обойти это? Я еще не слишком хорошо знаком с тестированием JS. У Rails есть фанковый механизм автозагрузки, который автоматически найдет файлы, поэтому в моих тестах это обычно не требуется. –

+0

@MattGibson Я использовал это. https : //github.com/classflow/import-alias reergymerej

ответ

20

Исправлено. У меня был .babelrc в неправильной папке. Это должно было быть в корневом каталоге. Когда я переехал туда, все сработало.

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

Пользователи также могут добавить следующий сниппет на package.json: '" babel ": {" presets ": [" response "," es2015 "]} ', для тех, кто любит все в пакете.json – AceMark

+0

NICE THANK YOU .. и больше персонажей –

0

Еще одно место, где Jest может бросить Unexpected token на @ при использовании в @connect (встречается в большинстве учебных пособий). Прикрепите babel-plugin-transform-decorators-legacy в файле package.json, запустите npm install и убедитесь, что в вашем файле .babelrc есть строки "presets": ["es2015", "react", "stage-0"] и "plugins": ["transform-decorators-legacy"].

Смежные вопросы