Question

使用打字稿定义测试输出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中定义组件？

Example code from CRA Facebook page

编辑：@rzelek接受的指向正确方向的答案。

根据JSX handbook中的定义，编译器选项定义了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);
});

Answer 1

包含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/。 CRA的基本tslint配置应与此类似：

{
  "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.

Answer 2

您的<App>组件是如何定义的？

我们假设这些是组件属性和状态接口（我通常在每个组件的文件开头定义它们）：

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

可以像这样定义类组件

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

可以这样定义功能组件

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

您可能要检查react-redux-typescript-guide

还有this question might be related

用Typescript编写简单的测试会给出类型断言错误

2 个答案: