Typescript + React Testing Library - «SidebarItem» относится к значению, но здесь используется как тип. Вы имели в виду 'typeof SidebarItem'? Ts (2749) - PullRequest
Новая
       78

Typescript + React Testing Library - «SidebarItem» относится к значению, но здесь используется как тип. Вы имели в виду 'typeof SidebarItem'? Ts (2749)

0 голосов
/ 11 июля 2020

Я создаю тест для простого компонента React с помощью Jest + RTL.

Это мой компонент: 

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;

И это мой тест: 

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
    })

});

Я получаю сообщение об ошибке TS: 'SidebarItem' refers to a value, but is being used as a type here. Did you mean 'typeof SidebarItem'?ts(2749)

Мое первоначальное предположение заключалось в том, что я использовал устаревшие версии для Jest, RTL или Typescript. Я уже обновил RTL, Jest и Typescript. Я также настроил свой jest.config. js в тестовую среду jsdom. Я также слежу за большинством руководств по RTL в Интернете и не видел, чтобы кто-нибудь получал аналогичную ошибку, чем та, которую вижу я.

...