Error while trying to render a react component for tests

Question

I am trying to use create from react-test-renderer to render a component. That's what I'm trying to do

import { ReactTestRenderer, create} from 'react-test-renderer';
let component: ReactTestRenderer;
const createComponent = (tradingBalances: IBalance[]) => {
  component = create(<StakingContainer tradingBalances={tradingBalances} vaultBalances={mockVaultBalances} prices={mockPrices} />);
};

But I keep getting this error:

SyntaxError: .../path/... Unexpected token, expected "," (31:41)

  29 |   let instance: ReactTestInstance;
  30 |   const createComponent = (tradingBalances: IBalance[]) => {
> 31 |     component = create(<StakingContainer tradingBalances={tradingBalances} vaultBalances={mockVaultBalances} prices={mockPrices} />);
     |                                          ^
  32 |   };

Why? What am I missing?

Answer 1

TypeScript compiler is not recognizing React syntax (JSX). Make sure that your filename uses .tsx extension.