reactjs – React Jest – 意外的令牌导入

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

以下是我在阅读stackoverflow和github上的文章时尝试过的一些内容

添加了测试预设和这些插件“transform-es2015-modules-commonjs”,dynamic-import-node“到我的babel配置

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

在我的package.json中,Jest属性具有以下设置：

"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导入.我在网上尝试过的解决方案似乎都没有效果.

这里还有我的开发依赖项：

"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$/,{
        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,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;

谢谢