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代码中有一条弯曲的红色线条，悬停时显示Argument of type 'Report' is not assignable to parameter of type 'ReactElement<any>'。

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

我的考试有什么问题？

Answer 1

这是问题所在：每当您键入<div>Foo</div>，<Component />或其他非标准JavaScript的JSX语法时。如果打开浏览器控制台并输入<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))。

这就是为什么您有错误；您正在尝试访问createElement中的方法React，但未导入。

导入React将修复您的测试。

Answer 2

测试文件扩展名应被识别为使用React语法的文件（例如tsx），而React应该使用import React from "react";进行定义。

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

语法错误：意外的令牌，预期为“ <！---->”

2 个答案: