SyntaxError: Unexpected token, expected "</>"

Question

添加这个问题是因为我在网上不容易找到答案。

我正在尝试使用 react-testing-library 来测试组件是否正确呈现。但是，我收到许多似乎没有多大帮助的错误。

这是我的测试文件（report.test.ts，与代码中的组件一起）：

import { render } from "react-testing-library";
import "jest-dom/extend-expect";
import Report from "./Report";

test("component", () => {
  const reportData = {
    name: "test-report-name",
    url: "test-url"
  };
  const { getByText } = render(<Report report={reportData} />);

  expect(getByText("test-report-name")).toHaveAttribute("href", "test-url");
});

当我尝试运行测试时，出现错误 SyntaxError: Unexpected token, expected "</>"。 VS Code 中有一条红色波浪线，悬停时显示 Argument of type 'Report' is not assignable to parameter of type 'ReactElement<any>'.

即使我将报告标签更改为简单的 <div />，我也会得到 Cannot find name 'div'.

我的测试有什么问题？

Answer 1

测试文件扩展名应被识别为使用 React 语法的文件（例如 tsx），并且 React 应使用 import React from "react";.

定义

当使用JSX语法时，似乎必须在文件中定义React，并且文件类型必须被识别为使用React的文件类型。因此，如果测试文件具有 js 扩展名，则可能需要进行类似的更改。

Answer 2

问题在于：每当您键入 <div>Foo</div>、<Component /> 或其他非标准的 JSX 语法时 JavaScript。如果你打开浏览器控制台并输入 <div /> 你会得到 Uncaught SyntaxError: Unexpected token <.

那么浏览器如何设法读取您的 XML 代码？根据您的配置，您可以将 JSX 转换为普通的旧 JavaScript——通常是 babel.

每当您输入 <div className="foo">Hello</div> 时，该代码就会被翻译成 React.createElement('div', {className: 'foo'}, 'Hello')。事实上，您可以使用 createElement 进行编码，如果您愿意，可以跳过整个 JSX。

您的测试也是如此。

在您的示例中，render(<Report report={reportData} />) 将在您的测试运行之前转换为 render(React.createElement(Report, {report: reportData}, null))。

这就是你出错的原因；您正在尝试访问 React 的方法 createElement 但您没有导入它。

导入 React 将修复您的测试。

SyntaxError: Unexpected token, expected "</>"

SyntaxError: Unexpected token, expected "</>"

reactjs

react-testing-library