JSX 没有使用 Jasmine/PhantomJS 测试编译答案

【问题标题】：JSX is not compiling with Jasmine/PhantomJS testJSX 没有使用 Jasmine/PhantomJS 测试编译
【发布时间】：2016-02-26 00:28:42
【问题描述】：

我无法编写测试并在我的 react/jasmine/phantomjs 测试中包含组件的渲染。

我尝试以下方法：

beforeEach(function(){

        var component = TestUtils.renderIntoDocument(
        <JsonTab results = [1,2,3]/>
);

我得到错误：意外的令牌

我正在使用 JSX-loader 和 webpack，所以我不确定为什么无法编译这个组件。有任何想法吗？我是反应测试的新手。

【问题讨论】：

你确定 phantom 是从 webpack 获取它的代码吗？
您的文件肯定没有按照您的意愿从 .jsx 转换为 .js。
您的 Jasmine 测试运行情况如何？业力？

标签： unit-testing reactjs jasmine phantomjs webpack

【解决方案1】：

我不知道你是如何运行你的 Jasmine 测试的，但一般来说，如果你想在你的测试中使用 JSX，你将需要一个编译器。这是一个编译器示例，可将您的代码转换为任何跑步者都能理解的内容：

//based on https://github.com/danvk/mocha-react
var fs = require('fs');
var babel = require('babel-core');
var origJs = require.extensions['.js'];

// A module that exports a single, stubbed-out React Component.
var reactStub = 'module.exports = require("react").createClass({render:function(){return null;}});';

// Should this file be stubbed out for testing?
function shouldStub(filename) {
  if (!global.reactModulesToStub) {
    return false;
  }

  // Check if the file name ends with any stub path.
  var stubs = global.reactModulesToStub;
  for (var i = 0; i < stubs.length; i++) {
    if (filename.substr(-stubs[i].length) == stubs[i]) {
      return true;
    }
  }
  return false;
}

// Transform a file via JSX/Harmony or stubbing.
function transform(filename) {
  if (shouldStub(filename)) {
    return reactStub;
  } else {
    var content = fs.readFileSync(filename, 'utf8');
    return babel.transform(content).code;
  }
}

// Install the compiler.
require.extensions['.js'] = function(module, filename) {
  // optimization: code in a distribution should never go through JSX compiler.
  if (filename.indexOf('node_modules/') >= 0) {
    return (origJs || require.extensions['.js'])(module, filename);
  }

  return module._compile(transform(filename), filename);
};

module.exports = {
  transform: transform,
  shouldStub: shouldStub
};

【讨论】：