Material-UI + Enzyme：浅渲染组件？

Question

我正在更新我的应用程序到React、Enzyme和Material-UI的最新版本。

我知道在15版本中，如果没有指定主题组件，Material-UI会删除默认的主题组件。现在的首选方法是，用我们想要使用的样式来包装整个应用程序，并使用组件。这个方法没有任何问题，但我的测试现在却出现错误。

任何使用Material-UI组件并在其中调用ShallowWrapper.html()的组件，现在都会导致我的测试失败，显示错误信息“TypeError: Cannot read property 'prepareStyles' of undefined”。

请注意，如果我不使用ShallowWrapper.html()，就不会出现错误。所以只有在需要查看HTML输出时才会失败。这很有道理，当实际渲染东西时，Material-UI只关心样式。

我创建了一个非常简单的测试用例来展示我是如何做的：

import * as React from 'react'
import * as chai from 'chai'
import chaiEnzyme = require('chai-enzyme')
import { shallow } from 'enzyme'
import Avatar from 'material-ui/Avatar'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'

chai.use(chaiEnzyme());
let expect = chai.expect;

describe('Unit Test', () => {
    it(`Should work`, () => {
        let shallowComponent = shallow(
            <MuiThemeProvider>
                <Avatar src='foo.jpg' />
            </MuiThemeProvider>
        );
        expect(shallowComponent.html()).to.exist
    })
});

我原以为简单地包装我的组件就可以了。显然，我在某个步骤上出错了。有人能指点我一下吗？

- gCardinal

---

非常感谢，我之前一直困惑为什么我的Material-ui测试不通过，后来发现是因为代码中的console.log(wrapper.html())这行代码有错误，删除之后，你描述的错误就消失了。 - Faktor 10

Answer 1

你需要在这种情况下使用 mount，shallow 只渲染组件的一层，因此它不会以这种方式渲染子元素，请尝试以下方法：

describe('Unit Test', () => {
    it(`Should work`, () => {
        let shallowComponent = mount(
            <MuiThemeProvider>
                <Avatar src='foo.jpg' />
            </MuiThemeProvider>
        );
        expect(shallowComponent.html()).to.exist
    })
});

- omarjmh

---

既然我在问一些不可能的事情，那么我想这就是答案了！从这个角度来看，这是否意味着当调用.html()时，Shallow停止变得肤浅了呢？ - gCardinal

那并不完全正确，你为什么不将其记录下来看一下呢？另外还可以查看.debug文件，这样你就能对你所测试的内容有个大致的了解。 - omarjmh

哎呀，这并不是理想的测试语法。我希望我们未来能够减少对<MuiThemeProvider>包装器的依赖。 - Con Antonakos

我有同样的问题，但是我还是不理解。根据官方enzyme文档中html()方法的这些示例，调用shallowComponent.html()应该完全没有问题。为什么在使用MuiThemeProvider时无法正常工作？有人能为初学者解释一下吗？ - Joerg

这是因为 shallow 不会渲染任何子组件（这就是它的作用），所以最终只测试了 MuiThemeProvider，而没有测试 Avatar 组件。理想情况下，我们应该使用来自 MuiThemeProvider 的上下文进行浅层测试 Avatar。 - John Weisz

Answer 2

对我来说，当我将自定义主题作为默认主题提供给makeStyles时，它起作用了。

const useStyles = makeStyles(theme => ({
  // theme object
}), { defaultTheme: customTheme });

- movlan