TestCafé + React JSX error (неожиданный токен)

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 не распознает React

Answer 2

Хорошо, я решил проблему. в случае, если кто-то еще приземлится здесь.

На сайте реакции вы можете вернуть 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>
  }
}