Typescript + React Testing Library - 'SidebarItem' refers to a value, but is being used as a type here. Did you mean 'typeof SidebarItem'?ts(2749)

Question

I'm creating a test for a simple React component using Jest + RTL.

This is my component:

import React from 'react';

import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import Grid from '@material-ui/core/Grid';

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
    centeredContent: {
        justifyContent: 'center',
    },
    text: {
        paddingLeft: theme.spacing(5),
    },
    spacer: {
        paddingLeft: theme.spacing(5),
    },
}));

interface SidebarItemProps {
    children: any; //TODO - find an extensible type that we can use for {children}
    text?: string;
    openSidebar: boolean;
}

const SidebarItem: React.FC<SidebarItemProps> = ({ children, text, openSidebar }) => {
    const classes = useStyles();
    return (
        <ListItem button className={classes.centeredContent}>
            {!openSidebar && <Grid className={classes.spacer} />}
            <ListItemIcon>{children}</ListItemIcon>
            <ListItemText className={classes.text} primary={text} primaryTypographyProps={{ variant: 'body1' }} />
        </ListItem>
    );
};

export default SidebarItem;

And this is my test so far:

import React from 'react';

import '@testing-library/jest-dom/extend-expect';
import { render, screen, RenderResult } from '@testing-library/react';
import SidebarItem from '../SidebarItem';

describe('SidebarItem', () => {
    // afterEach(() => {
    //     jest.clearAllMocks();
    // });

    // afterAll(() => {
    //     jest.restoreAllMocks();
    // });

    let documentBody: RenderResult;

    beforeEach(()=> {
        documentBody = render(<SidebarItem/>) // I get an error here
    })

});

I get a TS error: 'SidebarItem' refers to a value, but is being used as a type here. Did you mean 'typeof SidebarItem'?ts(2749)

My initial guess was that I was using out-of-date versions for either Jest, RTL, or Typescript. I've already updated both RTL, Jest, and Typescript. I've also set up my jest.config.js to the jsdom test environment. I'm also following most RTL tutorials on the web and haven't seen anyone get a similar error than the one I'm seeing.

Answer 1

I had this exact same issue and could not find anything about it.

I finally discovered that it was due to my test file being named spec.ts instead of spec.tsx.

Tests that uses jsx need to be in a tsx file due to the typescript definition of a generic being <>.