App' refers to a value, but is being used as a type here. Did you mean 'typeof App'?

Question

I want to learn-by-doing Typescript with React so I've migrated manually from JS to TS in my create-react-app but my default testing file App.test.ts:

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />); // There's an error here
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

has this error:

'App' refers to a value, but is being used as a type here. Did you mean 'typeof App'?

Answer 1

Use .tsx for JSX and .ts for non-jsx files. This is because you are using .ts extension for files with JSX. To resolve this, change the file extensions from .ts to .tsx for any files that contain any component code and logic. This enables the <App/> to be parsed as JSX and not regular JavaScript/TypeScript. Worked for me.