webentwicklung-frage-antwort-db.com.de

Wenn Sie den Test per Jest ausführen, bekomme ich in den enthaltenen .jsx-Dateien `Unexpected token`

Ich verwende Jest und Babel 6 und versuche, einen Test auszuführen, der eine .jsx-Datei enthält. Aus irgendeinem Grund wird die Datei nicht als .jsx aufgenommen und scheint als reines js behandelt zu werden, was zu einem Fehler in einer Zeile führt, die eine React-Komponente enthält.

Dies ist der 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)

    })
  })
});

Mein package.json ist hier:

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

Und ich laufe auf der Kommandozeile mit npm test

Mein .babelrc sieht so aus:

{
  "presets": [
     "react",
     "es2015"
  ]
}
10
Matt Gibson

Behoben. Ich hatte meinen .babelrc im falschen Ordner. Es sollte sich im Stammverzeichnis befinden. Als ich es dorthin zog, hat alles funktioniert.

{
  "presets": [
     "react",
     "es2015"
  ]
}
31
Matt Gibson

Ein anderer Ort, an dem Jest Unexpected token werfen kann, befindet sich auf @, wenn er in @connect verwendet wird (trifft in der Mehrzahl der Tutorials zu). Fügen Sie babel-plugin-transform-decorators-legacy in Ihre package.json-Datei ein, führen Sie npm install aus und vergewissern Sie sich, dass in der .babelrc-Datei Zeilen "presets": ["es2015", "react", "stage-0"] und "plugins": ["transform-decorators-legacy"] vorhanden sind.

2
zeliboba

Ein weiterer Ort, an dem Sie nachschauen können, ist die Konfiguration von Jest transform . Beispielsweise kann eine JSX-Transformation auf einige, aber nicht alle Quellen angewendet werden.

0
Will Cain