reactjs - react-test-renderer

jest: el paquete de prueba no se ejecutó, SyntaxError: importación de token inesperada

Question

Esta es mi configuración jest del archivo package.json:

"jest": {
    "automock": false,
    "browser": true,
    "moduleNameMapper": {
      "//.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./app/tests/mocks/FileMock.js",
      "//.(css|less)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "transform": {
      "^.+//.jsx?$": "./node_modules/babel-jest",
      "//.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./app/tests/mocks/FileTransformer.js"
    },
    "testEnvironment": "jsdom",
    "testPathDirs": [
      "./app/tests"
    ],
    "testRegex": ".*.test.js",
    "verbose": true
  }

Y el archivo .babelrc ubicado en mi carpeta raíz:

{
  "plugins": ["syntax-dynamic-import", "transform-runtime"],
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "react",
    "stage-0"
  ],
  "env": {
    "start": {
      "presets": [
        "react-hmre"
      ]
    }
  }
}

De acuerdo con la documentación que se encuentra en la página de inicio de broma , esto es todo lo que necesito para que Babel funcione, es mágico.

En cualquier caso, esta prueba:

import React from ''react'';
import {shallow} from ''enzyme'';
import Landing from ''../components/Landing.component'';

describe(''<Landing/>'', () => {
  it(''should render a header to the page'', () => {
    const landing = shallow(<Landing/>);
    expect(landing.find(''h1'').text()).toBe(''This is the Landing component'');
  });
});

devoluciones:

FAIL app / tests / Landing.component.test.js ● No se pudo ejecutar el conjunto de pruebas

/Users/shooshte/PersonalProjects/surviveJS/app/tests/Landing.component.test.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import

Reaccionar de ''reaccionar''; ^^^^^^ SyntaxError: Importación de token inesperada

  at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)

¿Qué estoy haciendo mal?

Answer 1

Cada preset anual solo compila lo que fue ratificado en ese año. babel-preset-env reemplaza a es2015 , es2016 , es2017 , latest

Sobre esta base, en las configuraciones más recientes, debe usar / reemplazar sus complementos / es2015 preestablecidos de es2015 y cualquier esX con el nuevo: env .

1. Debe instalar babel-preset-env con npm install .
2. En su .babelrc debe actualizar en consecuencia:

{
  "presets": [
    "env", 
    "stage-0", 
    "react-native"
  ],
  "plugins": ...
}

Más información sobre la documentación oficial de complementos de Babel .

Remember️ Recuerde que el orden de los complementos / ajustes preestablecidos en la matriz es importante.

Answer 2

El siguiente .babelrc funciona para mí (sin adiciones):

{
  "presets": [["env", {
    "debug": false,
    "modules": false
  }],  "es2015", "stage-0", "react"],
  "plugins": [
    "react-hot-loader/babel",
    "syntax-dynamic-import",
    "dynamic-import-node",
    "transform-class-properties",
    "transform-decorators-legacy"
  ]
}

La sección "devDependencies" de package.json se ve así:

...
"devDependencies": {
  "babel-cli": "latest",
  "babel-core": "^6.26.3",
  "babel-eslint": "^8.2.3",
  "babel-jest": "^22.4.4",
  "babel-loader": "latest",
  "babel-plugin-dynamic-import-node": "^1.2.0",
  "babel-plugin-lodash": "latest",
  "babel-plugin-syntax-dynamic-import": "^6.18.0",
  "babel-plugin-transform-class-properties": "^6.24.1",
  "babel-plugin-transform-decorators-legacy": "latest",
  "babel-plugin-transform-dynamic-import": "^2.0.0",
  "babel-plugin-transform-flow-strip-types": "^6.22.0",
  "babel-plugin-transform-object-rest-spread": "latest",
  "babel-polyfill": "^6.26.0",
  "babel-preset-env": "^1.7.0",
  "babel-preset-flow": "^6.23.0",
  "babel-preset-react": "^6.24.1",
  "babel-preset-react-app-babel-7": "^4.0.1",
  "babel-preset-stage-0": "^6.24.1",
 ...

Answer 3

En mi caso, tuve la siguiente configuración .babelrc :

{
  "presets": [
    ["env", { "modules": false }],
    "react",
    "stage-2"
  ],
  "plugins": [
    "transform-runtime",
    "transform-class-properties",
    "react-hot-loader/babel"
  ]
}

A pesar babel-env se especificó babel-env , todavía obtuve el error. Para solucionarlo tuve que quitar los "módulos": falso flag.

Answer 4

Jest establece la variable env para probar, así que tuve que agregar mis ajustes preestablecidos a la configuración env en .babelrc:

{
  "plugins": ["syntax-dynamic-import", "transform-runtime"],
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "react",
    "stage-0"
  ],
  "env": {
    "start": {
      "presets": [
        "react-hmre"
      ]
    },
    "test": {
      "presets": ["es2015", "react", "stage-0"]
    }
  }
}

Answer 5

Necesitas instalar babel-jest. Yo tuve el mismo problema.

Ir a su directorio de aplicaciones, hilo agregar babel-jest

¡Buena suerte!