陣營玩笑 - 意外的令牌進口

Question

我學反應，我想test one of my components，但我堅持了這個錯誤：

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

這裏的一些東西從計算器和github上

閱讀文章中，我曾嘗試

加入測試的預設和這些插件「變換ES2015模塊-CommonJS的」動態導入節點」我通天配置

{ 
    "presets": ["es2015", "react"], 
    "env": { 
    "test": { 
     "presets":[ 
     ["es2015", { "modules": false }], 
     "stage-0", 
     "react"], 
     "plugins": [ 
     "transform-es2015-modules-commonjs", 
     "dynamic-import-node" 
     ] 
    } 
} 
} 

在我的package.json的玩笑屬性有SE設置：

"jest": { 
    "verbose": true, 
    "moduleFileExtensions": [ 
     "ts", 
     "tsx", 
     "jsx", 
     "js" 
    ], 
    "transform": {}, 
    "moduleDirectories": [ 
     "node_modules" 
    ], 
    "transformIgnorePatterns": [ 
     "node_modules/(?!react)/" 
    ], 
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$" 
    }, 

我actual component是建立與ES6和打字稿如果這能幫助你幫助我:)

從我讀過，好像開玩笑扼流圈進口，因爲節點不明白ES6進口。我在網上嘗試的解決方案似乎都沒有效果。

而且，這裏是我的dev的相關性：

"devDependencies": { 
    "awesome-typescript-loader": "^3.2.2", 
    "babel-cli": "^6.24.1", 
    "babel-core": "^6.25.0", 
    "babel-eslint": "^7.2.3", 
    "babel-jest": "^20.0.3", 
    "babel-loader": "^7.1.1", 
    "babel-plugin-dynamic-import-node": "^1.0.2", 
    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "babel-preset-stage-0": "^6.24.1", 
    "css-loader": "^0.28.4", 
    "enzyme": "^2.9.1", 
    "eslint": "^4.4.1", 
    "eslint-config-airbnb": "^15.1.0", 
    "eslint-loader": "^1.9.0", 
    "eslint-plugin-import": "^2.7.0", 
    "eslint-plugin-jsx-a11y": "^6.0.2", 
    "eslint-plugin-react": "^7.2.0", 
    "extract-text-webpack-plugin": "^3.0.0", 
    "html-webpack-harddisk-plugin": "^0.1.0", 
    "html-webpack-plugin": "^2.30.1", 
    "jest": "^20.0.4", 
    "node-sass": "^4.5.3", 
    "react-test-renderer": "^15.6.1", 
    "regenerator-runtime": "^0.10.5", 
    "sass-loader": "^6.0.6", 
    "source-map-loader": "^0.2.1", 
    "style-loader": "^0.18.2", 
    "ts-jest": "^20.0.10", 
    "typescript": "^2.4.2", 
    "webpack": "^3.5.1", 
    "webpack-dev-middleware": "^1.12.0", 
    "webpack-dev-server": "^2.7.0" 
    }, 

的WebPack配置

const webpack = require('webpack'); 
const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin'); 

const HOST = "127.0.0.1"; 
const PORT = "9000"; 

const devServerUrl = "http://localhost:" + PORT + "/"; 

const config = { 
    devtool: 'source-map', 
    context: __dirname, // `__dirname` is root of project and `src` is source 
    entry: 
    [ 
    './src/index.js', 
    './src/ui/styles.scss' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: "bundle.js", 
    publicPath: '' 
    }, 
    resolve: { 
    extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss', '.css'] 
    }, 
    module: { 
    rules: [ 
     { test: /\.tsx?$/, loader: "awesome-typescript-loader" }, 
     { test: /\.js$/, exclude: /node_modules/, loader: ['babel-loader', 'eslint-loader'] }, 
     { test: /\.jsx$/, exclude: /node_modules/, loader: ['babel-loader', 'eslint-loader'] }, 
     { 
     test: /\.(sass|scss)$/, use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: ['css-loader', 'sass-loader'] 
     }) 
     } 
    ] 
    }, 
    devServer: { 
    contentBase: "dist/", 
    noInfo: true, 
    inline: true, 
    compress: true, 
    port: PORT, 
    host: HOST, 
    hot: true 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     filename: 'index.html', // Output file name. 
     template: './public/index.html', // Use our HTML file as a template for the new one. 
     inject: 'body', 
     alwaysWriteToDisk: true, 
     output: { 
     path: path.join(__dirname, 'dist'), 
     filename: 'bundle.js' 
     }, 
    }), 
    new ExtractTextPlugin({ // define where to save the file 
     filename: 'styles.bundle.css'}), 
    new webpack.HotModuleReplacementPlugin(), 
    new HtmlWebpackHarddiskPlugin({ 
    outputPath: path.resolve(__dirname, 'dist') 
}) 
    ], 
}; 

module.exports = config; 

感謝

Answer 1

Jest不能與Typescript一起使用。

我從我的項目中刪除了Jest，並安裝了摩卡，卡瑪，柴&酵素。

輕鬆設置相比，玩笑其僞裝成：

Zero configuration testing platform

這篇文章是一個巨大的幫助：Getting Started on Testing with Typescript, ReactJS, and Webpack。

希望這可以幫助他人節省時間讓Jest與Typescript一起工作。

Answer 2

您需要安裝通天編譯器ES6和響應代碼

做使用

C:\Users\username\Desktop\reactApp>npm install babel-core 
C:\Users\username\Desktop\reactApp>npm install babel-loader 
C:\Users\username\Desktop\reactApp>npm install babel-preset-react 
C:\Users\username\Desktop\reactApp>npm install babel-preset-es2015 

儘量保持我們的WebPack作爲

var config = { 
    entry: './todoApp.js', 

    output: { 
     path:'./', 
     filename: 'index.js', 
    }, 

    devServer: { 
     inline: true, 
     port: 9191 
    }, 

    module: { 
     rules: [ 
     { 
     test: /\.css$/, 
     use: [ 'style-loader', 'css-loader' ] 
     } 
     ], 
     loaders: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel', 

      query: { 
       presets: ['es2015', 'react'] 
      } 
     } 

     ] 
    } 
} 

module.exports = config; 

Answer 3

那是因爲你已經配置通天不 transpile ES6模塊

"presets":[ 
    ["es2015", { "modules": false }], 

與再試一次modules到true（或省略，因爲它默認爲true），它應該工作。