SyntaxError: неожиданный токен, ожидаемый "</>" - PullRequest
Новая
       12

SyntaxError: неожиданный токен, ожидаемый "</>"

0 голосов
/ 14 ноября 2018

Добавление этого вопроса, потому что я не мог легко найти ответ в Интернете.

Я пытаюсь использовать 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 ]

0 голосов
/ 15 ноября 2018

Вот проблема: всякий раз, когда вы набираете <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)) перед выполнением теста.

И вот почему у вас есть ошибка;вы пытаетесь получить доступ к методу createElement из React, но не импортировали его.

Импортирование React исправит ваш тест.

0 голосов
/ 14 ноября 2018

Расширение тестового файла должно быть распознано как файл, использующий синтаксис React (например, tsx), а React должен быть определен с использованием import React from "react";.

При использовании синтаксиса JSX кажется,React должен быть определен в файле, а также тип файла должен быть распознан как тот, который использует React.Таким образом, предположительно, аналогичное изменение потребовалось бы, если бы тестовый файл имел расширение js.

...