Theme.spacing 不是一个函数

Question

我最近将我的 react 应用程序从 material-ui v3 迁移到 v4，并用“@material-ui/styles”替换了“@material-ui/core/styles”，为了测试，我们使用了 jest 和酶。迁移后测试失败。我该如何解决这个问题？错误如下：

警告：Material-UI：styles提供的参数无效。您在上下文中提供没有主题的功能。父元素之一需要使用 ThemeProvider。错误：未捕获 [TypeError: theme.spacing is not a function] Full DOM 渲染 › 遇到声明异常 TypeError: theme.spacing is not a function

  17 |   },
  18 |   selectEmpty: {
> 19 |     marginTop: theme.spacing(2),
     |                      ^
  20 |   },

Answer 1

Material UI 旧版本就像 import { makeStyles } from '@material-ui/styles';

但他们已经更新了新版本，比如 import { makeStyles } from '@material-ui/core/styles'

Answer 2

您必须使用 ThemeProvider 包装每个测试。这解决了这个问题。例子：

    wrapper = mount(
      <ThemeProvider>
        <Dropdown handleSelect={handleSelectSpy} options={options} />
      </ThemeProvider>,
    );