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

Posted 2023-01-05

我刚开始测试咖啡厅，并且在我的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文件，但我没有使用打字稿。所以这似乎是错误的。

答案

[TestCafe移植过程未配置为处理JSX文件。

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

Testcafe wont recognise React

另一答案

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

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

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

即坏（在react中有效，但在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>