javascript - 单元测试 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();

非常感谢。

<小时/>

已编辑

karma.conf.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 语法将导致错误。