web-dev-qa-db-ja.com

jest経由でテストを実行すると、含まれている.jsxファイルに「予期しないトークン」が表示されます

JestとBabel 6を使用して、.jsxファイルを含むテストを実行しようとしています。何らかの理由で、ファイルは.jsxとしてピックアップされておらず、純粋なjsとして扱われているように見えるため、Reactコンポーネントを持つ行でエラーが発生します。

これはテストです：

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"
  ]
}
reactjsnpmbabeljsjestjs
13
Matt Gibson

修正しました。私は私の.babelrc間違ったフォルダー。ルートディレクトリにある必要があります。そこに移動すると、すべてが機能しました。

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

JestがUnexpected tokenを投げる可能性のある別の場所は、@で使用する場合の@connectにあります（チュートリアルの大部分で満たされています）。 package.jsonファイルにbabel-plugin-transform-decorators-legacyを接続し、npm installを実行し、.babelrcファイルに"presets": ["es2015", "react", "stage-0"]および"plugins": ["transform-decorators-legacy"]の行があることを確認します。

2
zeliboba

別の場所はjest transform configurationです。たとえば、すべてではなく一部のソースにJSX変換が適用される場合があります。

0
Will Cain