web-dev-qa-db-fra.com

En exécutant test via jest, je reçois un jeton inattendu dans les fichiers .jsx inclus

J'utilise Jest et Babel 6 et j'essaie de lancer un test qui inclut un fichier .jsx. Pour une raison quelconque, le fichier n'est pas récupéré en tant que .jsx et semble être traité comme de pur JS, ce qui entraîne l'erreur sur une ligne comportant un composant React.

C'est le 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)

    })
  })
});

Mon package.json est ici:

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

Et je cours sur la ligne de commande avec npm test

Mon .babelrc ressemble à ceci:

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

Fixe le. J'ai eu mon .babelrc dans le mauvais dossier. Il aurait dû être dans le répertoire racine. Quand je l'ai déplacé là-bas, tout a fonctionné.

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

Un autre endroit où Jest peut lancer Unexpected token est sur @ lorsqu’il est utilisé dans @connect (correspond à la majorité des tutoriels). Attachez babel-plugin-transform-decorators-legacy dans votre fichier package.json, exécutez npm install et assurez-vous qu'il existe des lignes "presets": ["es2015", "react", "stage-0"] et "plugins": ["transform-decorators-legacy"] dans votre fichier .babelrc.

2
zeliboba

Un autre endroit à regarder est n'importe quelle plaisanterie transformation configuration. Par exemple, une transformation JSX peut être appliquée à certaines sources, mais pas à toutes.

0
Will Cain