这是资产组件

const Assets = () => {
return(
<DashboardLayout>
      <MDBox>
        <Card>
          <HeadingWrapperBox>
            <MDTypography variant="h5" fontWeight="medium">
              Assets
            </MDTypography>
         </HeadingWrapperBox>
        </Card>
       </MDBox>
</DashboardLayout>
)
}

这是MDTypography组件

import { forwardRef } from "react";

// prop-types is a library for typechecking of props
import PropTypes from "prop-types";

// Custom styles for MDTypography
import MDTypographyRoot from "components/MDTypography/MDTypographyRoot";

// Material Dashboard 2 PRO React contexts
import { useMaterialUIController } from "context";

const MDTypography = forwardRef(
  (
    { color, fontWeight, textTransform, verticalAlign, textGradient, opacity, children, ...rest },
    ref
  ) => {
    const [controller] = useMaterialUIController();
    const { darkMode } = controller;

    return (
      <MDTypographyRoot
        {...rest}
        ref={ref}
        ownerState={{
          color,
          textTransform,
          verticalAlign,
          fontWeight,
          opacity,
          textGradient,
          darkMode,
        }}
      >
        {children}
      </MDTypographyRoot>
    );
  }
);

// Setting default values for the props of MDTypography
MDTypography.defaultProps = {
  color: "dark",
  fontWeight: false,
  textTransform: "none",
  verticalAlign: "unset",
  textGradient: false,
  opacity: 1,
};

// Typechecking props for the MDTypography
MDTypography.propTypes = {
  color: PropTypes.oneOf([
    "inherit",
    "primary",
    "secondary",
    "info",
    "success",
    "warning",
    "error",
    "light",
    "dark",
    "text",
    "white",
  ]),
  fontWeight: PropTypes.oneOf([false, "light", "regular", "medium", "bold"]),
  textTransform: PropTypes.oneOf(["none", "capitalize", "uppercase", "lowercase"]),
  verticalAlign: PropTypes.oneOf([
    "unset",
    "baseline",
    "sub",
    "super",
    "text-top",
    "text-bottom",
    "middle",
    "top",
    "bottom",
  ]),
  textGradient: PropTypes.bool,
  children: PropTypes.node.isRequired,
  opacity: PropTypes.number,
};

export default MDTypography;

这是MDTypographyRoot组件

import Typography from "@mui/material/Typography";
import { styled } from "@mui/material/styles";

export default styled(Typography)(({ theme, ownerState }) => {
  const { palette, typography, functions } = theme;
  const { color, textTransform, verticalAlign, fontWeight, opacity, textGradient, darkMode } =
    ownerState;

  const { gradients, transparent, white } = palette;
  const { fontWeightLight, fontWeightRegular, fontWeightMedium, fontWeightBold } = typography;
  const { linearGradient } = functions;

  // fontWeight styles
  const fontWeights = {
    light: fontWeightLight,
    regular: fontWeightRegular,
    medium: fontWeightMedium,
    bold: fontWeightBold,
  };

  // styles for the typography with textGradient={true}
  const gradientStyles = () => ({
    backgroundImage:
      color !== "inherit" && color !== "text" && color !== "white" && gradients[color]
        ? linearGradient(gradients[color].main, gradients[color].state)
        : linearGradient(gradients.dark.main, gradients.dark.state),
    display: "inline-block",
    WebkitBackgroundClip: "text",
    WebkitTextFillColor: transparent.main,
    position: "relative",
    zIndex: 1,
  });

  // color value
  let colorValue = color === "inherit" || !palette[color] ? "inherit" : palette[color].main;

  if (darkMode && (color === "inherit" || !palette[color])) {
    colorValue = "inherit";
  } else if (darkMode && color === "dark") colorValue = white.main;

  return {
    opacity,
    textTransform,
    verticalAlign,
    textDecoration: "none",
    color: colorValue,
    fontWeight: fontWeights[fontWeight] && fontWeights[fontWeight],
    ...(textGradient && gradientStyles()),
  };
});

这是Asset.test.js组件

import React from 'react';
import Assets from './Assets';
const { screen } = require('@testing-library/react');
const { Provider } = require('react-redux');
const { BrowserRouter } = require('react-router-dom');
const { MaterialUIControllerProvider } = require('context');
const { ThemeProvider, CssBaseline } = require('@mui/material');
const { default: themeRtl } = require('assets/theme/theme-rtl');

const store = [{}];
const renderer = (component) => {
  <Provider store={store}>
    <BrowserRouter>
      <MaterialUIControllerProvider>
        <ThemeProvider theme={themeRtl}>
          <CssBaseline />
          {component}
        </ThemeProvider>
      </MaterialUIControllerProvider>
    </BrowserRouter>
  </Provider>;
};
test('renders the "Assets" heading', async () => {
  // Render the component
  const screenRender = renderer(<Assets />);
  //render Asset heading
  const headingElement = screenRender.getByText('Assets');
  expect(headingElement).toBeInTheDocument();
});

TestingLibraryElement错误：找不到具有以下文本的元素：这可能是因为文本被多个元素分解了。在这种情况下，您可以为文本匹配器提供一个函数，使匹配器更加灵活。