3

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

我正在尝试使用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 标签更改为 simple <div />，我也会得到Cannot find name 'div'.

我的测试有什么问题？

4

2 回答 2

3

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

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

于 2018-11-14T17:22:01.630 回答
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 将修复您的测试。

于 2018-11-15T08:13:46.790 回答