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

Question

我是 test café 的新手，在我的 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 站点上，您可以 return 函数中的一些 JSX。当您需要一些简单的 html 代码，并且不想为其创建整个组件时（例如在传递自定义 reCharts tick 时），这很方便。使用 test Café 时，不能这样做。相反，您需要确保所有 jsx 都在其自己的 class 组件中。

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

即不好（在 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>
  );
};

好：相反，让它成为自己的 class 组件

// 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>
  }
}

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

TestCafé + React JSX error (unexpected Token)

testing

automated-tests

reactjs

e2e-testing

testcafe