TestCafé+ React JSX错误(意外令牌)

问题描述

我是新来测试咖啡馆的人，并且在我的React项目中看到一些错误.所有测试似乎都不错，除非每当它在辅助方法中命中JSX代码时，它都会产生SyntaxError.

I am new to test café, and am seeing some errors in my React project. All tests seem to be fine, except whenever it hits JSX code in a helper method, it gives a 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})`}

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

I have not found a solution yet, and I'm hoping someone has some tips.

文档提到添加:

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

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

to a tsconfig.json file, but I'm not using typescript. so that just seems wrong.

推荐答案

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

Ok, I worked out the issue. in case anyone else lands here.

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

On a react site, you can return some JSX in a function. This is handy when you need some simple html code, and don't want to create an entire component for it (such as when passing in a custom reCharts tick). When using test Café, you can't do this. Instead, you need to make sure all the jsx is in its own class component.

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

you CAN still do the above mentioned shortcut, but only if the function itself is inside a component.

即不好(在react中有效，但在testCafé中无效)

i.e.BAD (it's valid in react, but NOT with 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>
  );
};

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

GOOD: Instead, just make it its own class component

// 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错误(意外令牌)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！