我刚开始测试咖啡厅,并且在我的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文件,但我没有使用打字稿。所以这似乎是错误的。
好吧,我解决了这个问题。万一有人落在这里。
在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>
}
}