2

我现在刚开始测试，试图用我的项目设置 Jest，但它一直很痛苦.. 我正在尝试使用Webpack 教程做React App 教程，如果出现这个错误：

C:\Users\myuser\Desktop\myapp\__tests__\Link.test.js:2
import React from 'react';
^^^^^^
SyntaxError: Unexpected token import

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

我正在使用 Node v7.5.0 和 Webpack 2。我安装了所有必要的依赖项，还尝试使用 jest 配置进行排序，但它没有解决我的问题。我的 package.json 看起来像这样：

{
  "name": "myapp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "jest": {
    "modulePaths": ["<rootDir>/src/"],
    "moduleDirectories": ["node_modules"],
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    },
   "transformIgnorePatterns": [
      "<rootDir>/(node_modules)/"
    ]
  },
  "scripts": {
    "start": "webpack-dev-server --progress --watch",
    "build": "webpack --progress",
    "test": "jest --verbose"
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    "babel-jest": "^18.0.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.0",
    "babel-polyfill": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-2": "^6.22.0",
    "css-loader": "^0.26.1",
    "eslint": "^3.15.0",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-import-resolver-webpack": "^0.8.1",
    "eslint-loader": "^1.6.1",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jest": "^1.0.2",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-react": "^6.9.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "html-webpack-plugin": "^2.28.0",
    "jest": "^18.1.0",
    "jest-cli": "^19.0.2",
    "node-sass": "^4.5.0",
    "react-hot-loader": "3.0.0-beta.6",
    "react-test-renderer": "^15.4.2",
    "sass-loader": "^5.0.1",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.8",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0"
  },
  "dependencies": {
    "chart.js": "^2.5.0",
    "classnames": "^2.2.5",
    "file-loader": "^0.11.1",
    "flexboxgrid": "^6.3.1",
    "google-map-react": "^0.22.3",
    "intl": "^1.2.5",
    "intl-locales-supported": "^1.0.0",
    "lodash": "^4.17.4",
    "material-ui": "^0.17.0",
    "moment": "^2.17.1",
    "node-schedule": "^1.2.1",
    "normalize.css": "^5.0.0",
    "re-base": "^2.6.0",
    "react": "^15.4.2",
    "react-chartjs-2": "^2.0.5",
    "react-dom": "^15.4.2",
    "react-flexbox-grid": "^0.10.2",
    "react-router-dom": "^4.0.0",
    "react-scrollbar": "^0.5.1",
    "react-tap-event-plugin": "^2.0.1",
    "webpack": "^2.2.1"
  }
}

我的 .babelrc 文件如下所示：

{
  "presets": [
    ["es2015", {"modules": false}],
    "stage-2",
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ],
  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

我也设置了环境进行测试，但没有任何效果。

我的 Webpack 文件如下所示：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const plugins = [
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NamedModulesPlugin(),
  new HtmlWebpackPlugin({
    template: path.resolve(__dirname, './src/index.html'),
    inject: true,
    favicon: path.resolve(__dirname, './src/images/favicon.ico'),
  }),
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify('dev'),
    },
  }),
];

module.exports = {
  devtool: 'cheap-eval-source-map',

  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './index.jsx',
  ],

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public'),
    publicPath: '/',
  },

  context: path.resolve(__dirname, 'src'),

  resolve: {
    modules: [path.resolve(__dirname, './src'), path.resolve(__dirname, './node_modules')],
    extensions: ['.js', '.jsx'],
  },

  devServer: {
    hot: true,
    port: 3000,
    contentBase: path.resolve(__dirname, 'public'),
    historyApiFallback: true,
    publicPath: '/',
  },

  module: {
    rules: [
      {
        test: /(\.js|\.jsx)$/,
        enforce: 'pre',
        exclude: /node_modules/,
        use: {
          loader: 'eslint-loader',
          options: {
            failOnWarning: false,
            failOnError: false,
          },
        },
      },
      {
        test: /(\.js|\.jsx)$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      },
      {
        test: /(\.scss|\.css)$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
          { loader: 'sass-loader' },
        ],
      },
      {
        test: /\.(png|jpg|)$/,
        use: ['url-loader?limit=200000'],
      },
    ],
  },

  plugins: plugins,

};

有人可以帮我解决这个问题吗？谢谢！

4

0 回答 0