Typescript + React 測試庫 - 'SidebarItem' 指的是一個值，但在這里用作類型。 您的意思是“typeof SidebarItem”嗎？ts(2749)

Question

我正在使用 Jest + RTL 為一個簡單的 React 組件創建一個測試。

這是我的組件：

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) '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測試環境。 我還在關注 web 上的大多數 RTL 教程，並且沒有看到任何人遇到與我所看到的錯誤類似的錯誤。

Answer 1

我遇到了完全相同的問題，但找不到任何相關信息。

我終於發現這是因為我的測試文件被命名為 spec.ts 而不是 spec.tsx。

由於泛型的 typescript 定義為 <>，使用 jsx 的測試需要在 tsx 文件中。

Answer 2

我也是，報錯了

您可以更改文件名：

  SidebarItem.test.ts to SidebarItem.test.tsx