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

IT技术 reactjs react-testing-library
2021-05-13 19:38:48

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

我试图用来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>'.

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

我的测试有什么问题?

2个回答

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

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

这里的问题:只要您输入<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))在您的测试运行之前转换为

这就是为什么你有错误;您正在尝试访问 的方法createElementReact但您没有导入它。

导入 React 将修复您的测试。