材料-UI+酶:浅渲染组件？

Question

我的工作是更新我的应用程序的最新版本的反应，酶和材料-UI。

我知道使用version 15，Material删除了默认的主题组件，如果没有给出任何内容。现在首选的方法是使用我们想要使用的样式将整个应用程序包装成一个MuiThemeProvider组件。这没有任何问题，但我的测试现在失败了，当他们不应该。

任何使用Material组件并将其命名为ShallowWrapper.html()的组件，现在都会使我的测试在消息TypeError: Cannot read property 'prepareStyles' of undefined中失败。

请注意，如果不使用ShallowWrapper.html()，则不会出现任何错误。因此，只有当我需要看到HTML输出时，它才会失败。这是合理的，材料用户界面应该只关心风格时，实际渲染的东西。

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

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
    })
});

我以为简单的包装我的组件应该是可行的。很明显，我错过了一步。有人能指出我的正确方向吗？

Answer 1

在本例中，您需要使用mount，shallow只呈现一个级别的组件，因此它不会以这种方式呈现子组件，尝试如下：

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

Answer 2

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

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