JEST: Test Suite udało się uruchomić, SyntaxError: Nieoczekiwany token import

Question

To jest mój jest configuration z pliku 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 
    } 

a plik .babelrc znajduje się w moim folderze root:

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

Zgodnie z dokumentacją znajdującą się pod dowcipem getting started page jest to wszystko, czego potrzebuję, aby babel działał magicznie.

Niezależnie ten test:

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'); 
    }); 
}); 

powraca:

FAIL app/tests/Landing.component.test.js ● Test suite failed to run

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

React from 'react'; ^^^^^^ SyntaxError: Unexpected token import

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

Co robię źle?

Answer 1

żartem ustawia zmienną env do przetestowania, więc musiałem dodać moje presety do ustawienia env w .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 2

Each yearly preset only compiles what was ratified in that year. babel-preset-env replaces es2015 , es2016 , es2017 , latest

opiera się na tym, na najnowszych konfiguracjach należy użyć/zastąpić Wtyczki/ustawienia es2015 i dowolne esX do nowego: env.

1. Musisz zainstalować babel-preset-env z npm install.
2. w twojej .babelrc należy odpowiednio zaktualizować:

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

Więcej informacji na .

☝️ Pamiętaj, że kolejność wtyczek/ustawień wstępnych w tablicy jest ważna.

Answer 3

W moim przypadku miałem następujący .babelrc config:

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

Nawet babel-env został określony nadal mam ten błąd. Aby to naprawić, musiałem usunąć "moduły": false flag.