reactjs - React Jest - 意外的 token 导入

原文 标签 reactjs unit-testing ecmascript-6 jestjs babel-jest

我正在学习 react ,我想 test one of my components但我被这个错误困住了:

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

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

在我的 babel 配置中添加了测试预设和这些插件“transform-es2015-modules-commonjs”、dynamic-import-node
{
  "presets":  ["es2015", "react"],
  "env": {
  "test": {
      "presets":[
        ["es2015", { "modules": false }],
         "stage-0",
        "react"],
      "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 和 typescript 构建的,如果对你有帮助的话:)

从我读到的内容来看,导入时似乎开 Jest ,因为节点不理解 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"
  },

网络包配置
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;

谢谢

最佳答案

Jest 不适用于 Typescript。

我已经从我的项目中删除了 Jest 并安装了 Mocha、Karma、Chai 和 Enzyme。

与伪装成以下内容的 Jest 相比,设置起来毫不费力:

Zero configuration testing platform



这篇文章是一个巨大的帮助:Getting Started on Testing with Typescript, ReactJS, and Webpack .

希望这可以避免其他人浪费时间让 Jest 使用 Typescript。

关于reactjs - React Jest - 意外的 token 导入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45658180/

相关文章:

javascript - 在ReactJS中访问文档对象的最佳实践

javascript - 将 React-Redux 调度定义为通用函数属性会引发 typescript 3.1.3 错误

javascript - ES6 : destructuring an object with symbols as keys

javascript - React native : Component not defined? 无法导入?

javascript - 根据 url 中给出的值,使用 react 路由动态渲染 react 组件

unit-testing - 在同一JUnit测试中同时使用Arquillian和PowerMock

javascript - JestJS:如何获得模拟函数的不同 promise 结果并测试抛出的错误?

ruby-on-rails - Unit::Test 与 Rspec 之间的差异

javascript - 尝试将子级追加到具有相同类名的所有元素

javascript - String属性访问器有什么区别?