Question

材料ui中有一个网格组件，我希望在我的React应用程序中使用jest对它进行单元测试。请在下面找到我的代码

对于上面的代码，我们将如何编写单元测试？我仔细阅读了他们的测试指南https://material-ui.com/guides/testing，但不清楚。任何想法/建议都非常感谢

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";

import "./styles.scss";

const styles = theme => ({
    root: {
      flexGrow: 1
    },
    paper: {
      height: 140,
      width: 100
    }
});

function Space({ classes }) {
  const x = [1, 2, 3];

  return (
    <div className="center">
      <Grid container className={classes.root}>
        <Grid item xs={12}>
          <Grid container justify="center" spacing={Number(32)}>
            {x.map(value => (
              <Grid key={value} item>
                <Paper className={classes.paper} />
              </Grid>
            ))}
          </Grid>
        </Grid>
      </Grid>
    </div>
  );
}

我应该能够使用笑话对上述代码进行单元测试

Answer 1

人们可能会讨厌我这么说。由于这种情况不包含任何逻辑，因此我只导出函数，反映真实数据的设置道具，并为浅浅呈现的函数制作快照。

每当更改时，请先进行检查，然后再进行更新。

编辑：导出不带withStyles HOC的常规组件，并将类添加到模拟道具中。另一个编辑：

在这种情况下，您的测试应该看起来像这样：

            resetContextHolders(request, previousLocaleContext, previousAttributes);
            if (requestAttributes != null) {
                requestAttributes.requestCompleted();
            }

开玩笑地对材料ui组件进行单元测试

1 个答案: