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.