jest: Beklenmeyen belirteç ithalat

Question

Bu benim jest configuration package.json dosyasından geçerli::

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

Ve kök klasöründe bulunan .babelrc dosyası:

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

Testi paketi, SyntaxError çalıştırılamadı

jest getting started page bulunan belgelere göre, bu o sihirli çalışmak babel için gereken her şey. Ne olursa olsun

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

döner: Yanlış yapıyorum

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) 

?

Answer 1

Jest test etmek env değişkeni ayarlar, bu yüzden .babelrc içinde env ayarına benim ön ayarlarını eklemek zorunda:

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

Buna dayanarak, kullanmak gerekir son yapılandırmalarında/replace senin eklentiler/es2015 ön ayar ve yenisine herhangi esX: env.

1. babel-preset-env ürününü npm install ile kurmalısınız. senin .babelrc buna göre güncellemek gerektiğini de
2. : üzerine

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

daha fazla bilgi.

eklentileri sırasını hatırla ☝️/dizi önceden önemlidir. Benim durumumda

Answer 3

Ben .babelrc yapılandırma aşağıdaki vardı:

babel-env Hala hata var belirtilmiş olmasına rağmen

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

. yanlış bayrak: Düzeltmek için ben "modüllerini" kaldırmak zorunda kaldı.