Написание простого теста в Typescript дает ошибку утверждения типа - PullRequest
Новая
       25

Написание простого теста в Typescript дает ошибку утверждения типа

0 голосов
/ 18 июня 2019

Использование машинописи для определения результатов теста Type assertion using the '<>' syntax is forbidden. Use the 'as' syntax instead. ошибка.

. / App.test.ts 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div); // here the error is produced
});

Как компонент должен быть определен в Typescript?

Пример кода со страницы CRA в Facebook

редактировать: Принятый ответ @rzelek указал в правильном направлении.

Как определено в справочнике JSX , параметры компилятора определяют способ интерпретации вашего JSX. В моем случае используется "jsx": "react", что означает, что для создания компонента необходимо использовать метод React.createElement () (см. Таблицу в справочнике JSX):

окончательный результат: . / App.test.ts 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const app = React.createElement(App);
  const div = document.createElement('div');
  ReactDOM.render(app, div);
});

Ответы [ 2 ]

0 голосов
/ 18 июня 2019

Как определяется ваш <App> компонент?

Давайте предположим, что это реквизиты компонентов и интерфейсы состояний (я обычно определяю их в начале файла для каждого компонента): 

interface Props {
   //... some props
}
interface State {
   //... some state
}

Компонент класса может быть определен так 

class MyComponent extends React.Component<Props, State> { ... }

Функциональный компонент может быть определен так 

const MyComponent: React.FC<Props> = ...

Возможно, вы захотите проверить act-redux-typcript-guide

Также, этот вопрос может быть связан

0 голосов
/ 18 июня 2019

Файлы машинописи, содержащие JSX, должны иметь расширение *.tsx вместо .ts.

Вы можете увидеть похожую проблему здесь: https://github.com/palantir/tslint-react/issues/141

Кроме того, ваш tsconfig.json должен иметь соответствующую конфигурацию. Для моих приложений CRA это: 

{
  "compilerOptions": {
    ...
    "jsx": "preserve",
    ...
  }
}

https://www.typescriptlang.org/docs/handbook/jsx.html

Ошибка, которую вы видите, скорее всего, исходит от tslint, а не от самого Typescript Здесь вы можете увидеть правило: https://palantir.github.io/tslint/rules/no-angle-bracket-type-assertion/. Базовая конфигурация tslint для CRA должна выглядеть примерно так: 

{
  "extends": ["tslint:latest", "tslint-react"],
  "rules": {
    // override tslint-react rules here
    "jsx-wrap-multiline": false
  }
}

В качестве хорошей отправной точки вы можете попробовать добавить "no-angle-bracket-type-assertion": false к tslint.json правилам и посмотреть, исчезнет ли ошибка.

PS. tslint обычно указывает на источник ошибки, например: ERROR: app/components/Root/index.ts[6, 7]: Type assertion using the '<>' syntax is forbidden. Use the 'as' syntax instead.

...