如何模拟材料表？

我不熟悉单元测试。
我应该为一个文件创建单元测试，该文件使用API获取数据，然后将其显示在MaterialTable中，并对页面使用TablePagination（来自MaterialUI）。

以下代码供参考：文章源自玩技e族-https://www.playezu.com/193632.html

import React, { useState, useEffect } from 'react';
import clsx from 'clsx';
import { useHistory } from 'react-router-dom';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/styles';
import MaterialTable from 'material-table';
import {
    MuiThemeProvider,
    createTheme,
    TablePagination,
} from '@material-ui/core';
import UserModel from '../../../models/UserModel';
const useStyles = makeStyles((theme) => ({
    root: {},
    content: {
        padding: 0,
    },
    inner: {
        minWidth: 800,
    },
    statusContainer: {
        display: 'flex',
        alignItems: 'center',
    },
    status: {
        marginRight: theme.spacing(1),
    },
    actions: {
        justifyContent: 'flex-end',
    },
}));
const VehicleTypesData = (props) => {
    const [vehicleTypesData, setVehicleTypesData] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    var [paramObj, setParamObj] = useState({
    const [params, setParams] = useState({
        page: 1,
        offset: 0,
    
    const numberOfVehicleTypes = Object.keys(vehicleTypesData).length;
    const ROWS_PER_PAGE = 10;
    const columnDescription = [
        { title: 'Name', field: 'name' },
        {
            title: 'Capacity (Volume)',
            field: 'capacity',
            type: 'numeric',
            align: 'left',
            emptyValue: () => <>-</>,
        },
        { title: 'Weight', field: 'weight' },
    ];
    const fetchDataFromAPI = async (paramObj, newOffset, newPage) => {
        setIsLoading(true);
        UserModel.getInstance().getVehicleTypes(
            paramObj,
            async (data) => {
                let vehicleTypesArray = [];
                await data.forEach((obj) => {
                    vehicleTypesArray.push({
                        id: obj.id,
                        title: obj.name,
                        capacity: obj.capacity,
                        weight: obj.weight,
                    
                
                setVehicleTypesData(vehicleTypesArray);
                setIsLoading(false);
                newPage && setParams({ ...params, offset: newOffset, page: newPage 
            },
            (err) => {
                setIsLoading(false);
            },
        );
    };
    const handleNextPage = async () => {
        const newOffset = params.offset + 20;
        let newParamObj = { ...paramObj };
        newParamObj = { ...newParamObj, offset: newOffset };
        setParamObj(newParamObj);
        const newPage = params.page + 1;
        setIsLoading(true);
        fetchDataFromAPI(newParamObj, newOffset, newPage);
    };
    const handlePreviousPage = async () => {
        if (params.offset > 0) {
            const newOffset = params.offset - 20;
            var newParamObj = { ...paramObj, offset: newOffset };
            newParamObj = { ...newParamObj, page: newPage };
            setParamObj(newParamObj);
            const newPage = params.page - 1;
            setIsLoading(true);
            fetchDataFromAPI(newParamObj, newOffset, newPage);
        }
    };
    const filterChange = (data) => {
        if (params.page !== 1) {
            setParams({
                ...params,
                page: 1,
                offset: 0,
            
        }
        let paramObj = {};
        let newParamobj = { ...paramObj };
        data.forEach((x) => {
            newParamobj = {
                ...newParamobj,
                [x.column.searchKey]: x.value.toLowerCase(),
            };
        
        setIsLoading(true);
        setParamObj(newParamobj);
        fetchDataFromAPI(newParamobj);
    };
    useEffect(() => {
        fetchDataFromAPI();
    }, []);
    let history = useHistory();
    const classes = useStyles();
    const { className, ...rest } = props;
    const theme = createTheme({
        typography: {
            fontFamily: 'Nunito Sans, Roboto, sans-serif',
        },
    
    return (
        <MuiThemeProvider theme={theme}>
            <MaterialTable
                title="Vehicle Types"
                columns={columnDescription}
                data={vehicleTypesData}
                isLoading={isLoading}
                onFilterChange={filterChange}
                className={clsx(classes.root, className)}
                editable={
                    {
                    }
                }
                options={{
                    search: false,
                    paging: false,
                    debounceInterval: 1000,
                    maxBodyHeight: 'calc(100vh - 285px)',
                    headerStyle: {
                        paddingTop: 0,
                        paddingBottom: 0,
                    },
                }}
                actions={[
                    {
                        icon: 'add',
                        tooltip: 'Add Vehicle Type',
                        isFreeAction: true,
                        onClick: () => {
                        },
                    },
                    {
                        icon: 'edit',
                        tooltip: 'Edit',
                        onClick: (event, data) => {
                        },
                    },
                    {
                        icon: 'delete',
                        tooltip: 'Delete',
                        onClick: (event, data) => {
                    },
                    },
                ]}
            />
            <TablePagination
                component="div"
                count={-1}
                rowsPerPage={ROWS_PER_PAGE}
                rowsPerPageOptions={[ROWS_PER_PAGE]}
                page={params.page}
                backIconButtonProps={{
                    'aria-label': 'Previous Page',
                    onClick: handlePreviousPage,
                    disabled: isLoading || params.page === 1,
                }}
                nextIconButtonProps={{
                    'aria-label': 'Next Page',
                    onClick: handleNextPage,
                    disabled: isLoading || numberOfVehicleTypes <= ROWS_PER_PAGE,
                }}
                labelDisplayedRows={() => {
                    return `Page ${params.page}`;
                }}
            />
        </MuiThemeProvider>
    );
};
VehicleTypesData.propTypes = {
    className: PropTypes.string,
};
export default VehicleTypesData;

相当简单的组件，这是我到目前为止得到的，这只是一个模拟API获取的尝试文章源自玩技e族-https://www.playezu.com/193632.html

import { render, screen } from '@testing-library/react';
import { async } from 'validate.js';
import VehicleTypesData from './component/index';
describe('Vehicle Types Component', () => {
    test('renders table data if request succeeds', async () => {
        window.fetch = jest.fn();
        window.fetch.mockResolvedValueOnce({
            json: async () => [
                { id: '1', name: 'Pickup', capacity: '1000', weight: '3000 kg' },
            ],
        
        render(<VehicleTypesData />);
    

软件测试软件文章源自玩技e族-https://www.playezu.com/193632.html 文章源自玩技e族-https://www.playezu.com/193632.html