语法错误:意外的标记，应为“</>"； [英] SyntaxError: Unexpected token, expected "</>"

问题描述

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

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

I am trying to use react-testing-library to test that a component renders correctly. However I get numerous errors that don't seem to help much.

这是我的测试文件(report.test.ts，与代码中的组件一起):

Here is my test file (report.test.ts, alongside the component in the code):

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 中有一条红色波浪线，悬停时表示 Report"类型的参数不可分配给ReactElement"类型的参数.

When I try to run the test, I get the error SyntaxError: Unexpected token, expected "</>". There is a red squiggly line in VS Code that on hover says Argument of type 'Report' is not assignable to parameter of type 'ReactElement<any>'.

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

Even if I change the Report tag to be simply <div />, then I get Cannot find name 'div'.

我的测试有什么问题?

推荐答案

应该将测试文件扩展名识别为使用 React 语法的文件(例如 tsx)，并且应该定义 React使用 import React from "react";.

The test file extension should be recognised as a file that uses the React syntax (eg. tsx), and React should be defined using import React from "react";.

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

When using the JSX syntax, it seems React must be defined in the file, and also the file type must be recognised as one that uses React. So presumably a similar change would be required if the test file had the js extension.

这篇关于语法错误:意外的标记，应为“</>"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！