TestCafé + React JSX error (unexpected Token)

谁说胖子不能爱 提交于 2020-04-17 22:07:05

问题


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.

The docs mention adding:

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

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


回答1:


The TestCafe transpilation process is not configured to handle JSX files.

Refer to the following thread to find more information:

Testcafe wont recognise React




回答2:


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

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.

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



来源:https://stackoverflow.com/questions/60566816/testcaf233-react-jsx-error-unexpected-token

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!