语法错误：意外的标记，应为“</>”

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扩展名，则可能需要进行类似的更改。