Question

我正在尝试使用karma和mocha为反应应用程序添加自动化测试。该应用程序是使用ES6和JSX编写的，所以我也使用webpack。我已将webpack配置导入到karma配置设置中，但每当我尝试渲染JSX组件进行测试时，我仍然会收到错误：

未捕获错误：模块解析失败：C：\ Users \ blahblahblah \ app \ tests \ components \ Clock.test.jsx意外令牌（18:47）您可能需要适当的加载程序来处理此文件类型。

  |       let testTime = 100;
  |       let expected = '00:01:40';
  |       let clock = TestUtils.renderIntoDocument(<Clock />);
  |       let actual = clock.formatTime(testTime);
  |

at app / tests / components / Clock.test.jsx：74

以下是相关文件：

webpack.config.js

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

const VENDOR_LIBS = [
  'axios', 'react', 'react-dom',
  'react-loading', 'react-router', 'moment'
];

module.exports = {
  entry: {
    bundle: [
      'script-loader!jquery/dist/jquery.min.js',
      'script-loader!foundation-sites/dist/js/foundation.min.js',
      './app/app.jsx',
    ], // compile app files to bundle.js
    vendor: VENDOR_LIBS // compile vendor files to vendor.js
  },
  externals: {
    jquery: 'jQuery'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  resolve: {
    alias: { 
      appStyles: path.resolve(__dirname, 'app/styles/app.scss'),
      Main: path.resolve(__dirname, 'app/components/Main.jsx'),
      Nav: path.resolve(__dirname, 'app/components/Nav.jsx'),
      Timer: path.resolve(__dirname, 'app/components/Timer.jsx'),
      Countdown: path.resolve(__dirname, 'app/components/Countdown.jsx'),
      Clock: path.resolve(__dirname, 'app/components/Clock.jsx'),
      Controls: path.resolve(__dirname, 'app/components/Controls.jsx')
    },
    extensions: [".js", ".jsx"]
  },
  module: {
    rules: [
      { 
        use: 'babel-loader',
        test: /\.jsx?$/,
        exclude: /node_modules/
      },
      {
        use: ['style-loader', 'css-loader', 'sass-loader'],
        test: /\.scss$/
      },
      { 
        use: ['style-loader', 'css-loader'],
        test: /\.css$/
      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest']
    }),
    new HtmlWebpackPlugin({
      template: './app/index.html'
    }),
    new webpack.ProvidePlugin({ 
      '$': 'jquery',
      'jQuery': 'jquery'
    })
  ],
  devtool: 'cheap-module-eval-source-map'
}

karma.conf.js

const webpackConfig = require('./webpack.config.js');

module.exports = (config) => {
  config.set({
    browsers: ['Chrome'], 
    singleRun: true, 
    frameworks: ['mocha'], 
    files: ['app/tests/**/*.test.jsx'],
    preprocessors: { 
      'app/tests/**/*.test.jsx': ['webpack', 'sourcemap']
    },
    reporters: ['mocha'], 
    client: {
      mocha: { // after 5 seconds, if a test hasnt finished, cancel it
        timeout: '5000'
      },
      webpack: webpackConfig, // use our established webpack config
      webpackServer: {
        noInfo: true
      }
    }
  })
}

的package.json

{
  "name": "boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "karma start",
    "clean": "rimraf dist",
    "build": "SET NODE_ENV=production npm run clean & webpack -p",
    "serve": "webpack-dev-server"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "axios": "^0.16.1",
    "express": "^4.15.2",
    "moment": "^2.18.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-loading": "0.0.9",
    "react-router": "^3.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-env": "^1.1.4",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-0": "^6.24.1",
    "colors": "^1.1.2",
    "css-loader": "^0.28.1",
    "expect": "^1.20.2",
    "foundation-sites": "^6.3.1",
    "html-webpack-plugin": "^2.28.0",
    "jquery": "^3.2.1",
    "karma": "^1.7.0",
    "karma-chrome-launcher": "^2.1.1",
    "karma-mocha": "^1.3.0",
    "karma-mocha-reporter": "^2.2.3",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.3",
    "mocha": "^3.4.1",
    "node-sass": "^4.5.3",
    "react-addons-test-utils": "^15.5.1",
    "rimraf": "^2.6.1",
    "sass-loader": "^6.0.5",
    "script-loader": "^0.7.0",
    "style-loader": "^0.17.0",
    "webpack": "^2.3.3",
    "webpack-dev-middleware": "^1.10.2",
    "webpack-dev-server": "^2.4.5"
  }
}

.babelrc

{
  "presets": ["react", "es2015", "stage-0"]
}

持续失败的测试：

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-dom/test-utils';
import expect from 'expect';
import $ from 'jQuery';

// Karma not recognizing webpack aliases
import Clock from 'babel-loader!./../../components/Clock.jsx';

describe('Clock Component', () => {
  it('should exist', () => {
    expect(Clock).toExist();
  });

  // THIS TEST KEEPS FAILING
  describe('formatSeconds()', () => {
    it('should format seconds to hh:mm:ss', () => {
      let testTime = 100;
      let expected = '00:01:40';
      let clock = TestUtils.renderIntoDocument(<Clock />); // JSX = problem
      let actual = clock.formatTime(testTime);

      expect(actual).toBe(expected);
    });
  });
});

Karma mocha没有识别JSX代码

0 个答案: