SyntaxError：意外令牌，應為“ </> ”

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>' 。

即使我將Report標記更改為簡單的<div /> ，也得到Cannot find name 'div' 。

我的考試有什么問題？

Answer 1

測試文件擴展名應該被識別為使用React語法的文件（例如tsx ），並且React應該使用import React from "react";來定義import React from "react"; 。

當使用JSX語法時，似乎必須在文件中定義React，並且文件類型也必須被識別為使用React的文件類型。 因此，如果測試文件具有js擴展名，則可能需要進行類似的更改。

Answer 2

問題出在這里：每當您鍵入<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(React.createElement(Report, {report: reportData}, null))在運行測試之前render(React.createElement(Report, {report: reportData}, null))將render(<Report report={reportData} />)轉換為render(React.createElement(Report, {report: reportData}, null)) 。

這就是為什么您有一個錯誤； 您正在嘗試訪問React createElement方法，但未導入它。

導入React將修復您的測試。