Question

运行 jest (v24.8) 时出现多个文件的错误：

    TypeError: (0 , _system.css) is not a function

    > 1 | import {
        | ^
      2 |   createStyles,
      3 |   makeStyles,
      4 |   TextField,

      at Object.<anonymous> (node_modules/@material-ui/core/Box/Box.js:14:37)
      at Object.<anonymous> (node_modules/@material-ui/core/Box/index.js:21:36)
      at Object.<anonymous> (node_modules/@material-ui/core/index.js:1025:36)
      at Object.<anonymous> (src/_nautical/sellers/components/SellerSignup/SellerSignupCompany.tsx:1:1)
      at Object.<anonymous> (src/_nautical/sellers/views/SellerSignupPage/SellerSignupPage.tsx:47:1)
      at Object.<anonymous> (src/_nautical/sellers/views/SellerSignupPage/index.ts:1:1)

问题似乎是材质 UI (v4.9) 组件的导入方式：

// importing them one at a time works
import * as Button from "@material-ui/core/Button";
import * as Card from "@material-ui/core/Card";
import * as CircularProgress from "@material-ui/core/CircularProgress";
import * as Divider from "@material-ui/core/Divider";
import * as Grid from "@material-ui/core/Grid";
import * as Icon from "@material-ui/core/Icon";
import * as Step from "@material-ui/core/Step";
import * as StepButton from "@material-ui/core/StepButton";
import * as Stepper from "@material-ui/core/Stepper";
import * as Typography from "@material-ui/core/Typography";

// but this breaks jest tests for some reason, even though it compiles
// import {
//   Button,
//   Card,
//   CircularProgress,
//   Divider,
//   Grid,
//   Icon,
//   Step,
//   StepButton,
//   Stepper,
//   Typography
// } from "@material-ui/core";

我在 jest 配置中忽略了这样的 CSS 文件：

    "moduleNameMapper": {
      ...
      "^.+.(css|sass|scss)$": "identity-obj-proxy"
    }

有什么想法吗？转换项目中的每个导入似乎没有必要，而且工作量很大。

TypeError: (0 , _system.css) 不是 Jest 和 Material UI 的函数错误

0 个答案: