TestCafé+ React JSX错误（意外令牌）

Question

我刚开始测试咖啡厅，并在我的React项目中看到一些错误。所有测试似乎都不错，除非每当它在辅助方法中命中JSX代码时，它都会产生SyntaxError。

SyntaxError: .../_helpers.js: Unexpected token (779:29)
  777 |
  778 | export const customLegend = (data) => {
> 779 |   if (isEmpty(data)) return (<div />);


SyntaxError: .../_helpers.js: Unexpected token (710:4)
  708 |   } = props || {};
  709 |   return (
> 710 |     <div
      |     ^
  711 |       transform={`translate(${x},${y})`}

我还没有找到解决方案，我希望有人能提供一些建议。

文档提到添加：

"compilerOptions": {
  "jsx": "react"
}

到tsconfig.json文件，但我没有使用打字稿。所以这似乎是错误的。

Answer 1

[TestCafe转译过程未配置为处理JSX文件。

请参阅以下线程以查找更多信息：

Testcafe wont recognise React

Answer 2

好吧，我解决了这个问题。万一有人落在这里。

在React网站上，您可以在函数中返回一些JSX。当您需要一些简单的html代码并且不想为其创建整个组件时（例如在传递自定义reCharts刻度时），这非常方便。使用测试咖啡馆时，您无法执行此操作。相反，您需要确保所有jsx都在其自己的类组件中。

您仍然可以执行上述快捷方式，但前提是该函数本身在组件内部。

即坏（在反应中有效，但在testCafé中无效）

// in the chart component, you may have a custom tick element
<XAxis dataKey={label} tick={customizedAxisTick} />

// which, can look like this:
export const customizedAxisTick = (props) => {
  const {
    payload = {}
  } = props || {};
  return (
    <div>
      custom stuff using the passed payload
    </div>
  );
};

好：相反，只需使其成为自己的类组件

// reference the new component, instead of a function that returns the jsx.
<XAxis dataKey={label} tick={<AxisTick />} />

// i.e.
class AxisTick extends React.Component {
  ...

  render () {
    <div>
      custom stuff using the passed payload
    </div>
  }
}