Writing simple test in Typescript gives type assertion error

Question

Using typescript to define a test outputs Type assertion using the '<>' syntax is forbidden. Use the 'as' syntax instead. error.

./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
});

How should the component be defined in Typescript?

Example code from CRA Facebook page

edit: Accepted answer by @rzelek pointed in the right direction.

As defined in the JSX handbook the compiler options define the way your JSX is interpreted. In my case used "jsx": "react" so that means the method React.createElement() needs to be used in order to create a component (see table in JSX handbook):

final result: ./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);
});

Is this in a tsx file ?

Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir

2019-06-18 07:57:15 +00:00
Commented Jun 18, 2019 at 7:57 — Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir, Commented Jun 18, 2019 at 7:57
Yes, also tried it as ts.

Remi
– Remi

2019-06-18 08:13:22 +00:00
Commented Jun 18, 2019 at 8:13 — Remi
– Remi, Commented Jun 18, 2019 at 8:13

rzelek · Accepted Answer · 2019-06-18 13:08:42Z

1

Typescript files that contain JSX should have *.tsx extension instead of .ts.

You can see similar issue here: https://github.com/palantir/tslint-react/issues/141

Additionally, your tsconfig.json should have appropriate config. For my CRA apps, this is:

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

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

The error you can see most probably comes from tslint, not Typescript itself. You can see a rule here: https://palantir.github.io/tslint/rules/no-angle-bracket-type-assertion/. Basic tslint config for CRA should be something similar to this:

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

As a good starting point, you can try adding "no-angle-bracket-type-assertion": false to tslint.json rules and see if error disappears.

PS. tslint usually points you to source of the error, for example: ERROR: app/components/Root/index.ts[6, 7]: Type assertion using the '<>' syntax is forbidden. Use the 'as' syntax instead.

edited Jun 18, 2019 at 13:08

answered Jun 18, 2019 at 7:58

rzelek

4,0331 gold badge36 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Remi Over a year ago

Yes, the app has it: App.tsx. Also tried app.test.tsx and app.test.ts

Remi Over a year ago

Tried "jsx": "preserve", and "jsx": "react",

yuval.bl · Accepted Answer · 2019-06-18 08:07:57Z

0

How's your <App> component defined?

Let's assume these are the component props and state interfaces (I usually define them in the beginning of a file for each component):

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

A class component can be defined like this

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

A function component can be defined like this

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

You might want to check react-redux-typescript-guide

Also, this question might be related

edited Jun 18, 2019 at 8:07

answered Jun 18, 2019 at 7:59

yuval.bl

5,0843 gold badges23 silver badges31 bronze badges

2 Comments

Remi Over a year ago

That is correct, defined it as: class App extends React.Component<IAppProps, IAppState>

yuval.bl Over a year ago

Do you use type assertion in your component? see: stackoverflow.com/questions/44202311/…

Collectives™ on Stack Overflow

Writing simple test in Typescript gives type assertion error

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related