单元测试 React JSX ES6.

Question

我正在使用React，JSX，ES6和Karma。

有人知道我的代码出了什么问题吗？

我正在尝试通过 Karma-Runner 的测试，但出了点问题：

let React = require("react");
let TestUtils = React.addons.TestUtils;
let expect = require("expect");
/* global describe */
/* global it */
describe("Header", function () {
  it("renders without problems", function () {
    let component = <Header/>;
    let header = TestUtils.renderIntoDocument(component);
    expect(header).toExist();
  });
});

$ karma start命令后，这是错误：

Module build failed: SyntaxError: /Users/aralroca/react-es6-boilerplate/app/tests/components/header.test.js: Unexpected token (9:20)
   7 | describe("Header", function () {
   8 |   it("renders without problems", function () {
>  9 |     let component = <Header/>;
     |                     ^
  10 |     let header = TestUtils.renderIntoDocument(component);
  11 | 
  12 |     expect(header).toExist();

非常感谢。

<小时 />

编辑

业力.js

module.exports = function (config) {
  config.set({
    browsers: [ process.env.CONTINUOUS_INTEGRATION ? "Firefox" : "Chrome" ],
    files: [
      "tests.bundle.js"
    ],
    frameworks: ["chai", "mocha"],
    plugins: [
      "karma-chrome-launcher",
      "karma-chai",
      "karma-mocha",
      "karma-sourcemap-loader",
      "karma-webpack"
    ],
    preprocessors: {
      "tests.bundle.js": ["webpack", "sourcemap"]
    },
    reporters: ["dots"],
    singleRun: true,
    webpack: {
      devtool: "inline-source-map",
      module: {
        loaders: [
          {
            exclude: /node_modules/,
            loader: "babel-loader",
            test: /.jsx?$/
          }
        ]
      }
    },
    webpackMiddleware: {
      noInfo: true
    }
  });
};

Answer 1

如果你想在测试中使用JSX，你需要连接karma-babel-preprocessor。

这将运行 babel 在执行之前转译测试。 否则，当 karma 运行测试时，ES6 或 JSX 语法会导致错误。